Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Different font for each menu point?

Different font for each menu point?

Scheduled Pinned Locked Moved General Discussion
10 Posts 2 Posters 179 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    danny
    wrote on last edited by
    #1

    Dear @Richard,

    is it possible to have a different font for each menu point?

    So News = Helvetica, Works = Times, Biography = Comic Sans etc.?

    http://testshila.de/onepage/

    Thanks and best wishes,

    Daniel

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by Richard
      #2

      Dear Daniel

      @danny

      Sure this is very possible 🌼

      When right-clicking on a menu-item in your browser and choosing "inspect" the webpages HTML structure will appear:

      Screen Shot 2021-05-18 at 8.59.02 AM.png


      Here we can see the each menu-item also has its own unique Class with number E.g:
      .menu-item-400 or .menu-item-399

      With this knowledge we can change the font-family easily.
      In either:

      Lay Options > Custom CSS & HTML > Custom CSS

      Or:

      Customize > CSS

      Custom CSS would look similar to this depending on your needs ( class name > then css rule nested within ):

      .menu-item-400{
      font-family: helvetica;
      }
      
      .menu-item-399{
      font-family: BebasNeue-Regular;
      }
      

      Here are some links that will help you with what is referenced:

      https://laytheme.com/documentation.html#custom-css-styling

      https://www.w3schools.com/cssref/pr_font_font-family.asp


      Best wishes Daniel and good luck - Google is your friend! šŸ’„šŸŒ
      Sincerely
      Richard
      1 Reply Last reply
      0
      • D Offline
        D Offline
        danny
        wrote on last edited by
        #3

        thanks @Richard ! I managed, can I change the font size for each menu item as well?

        thanks a lot and best wishes

        Daniel

        1 Reply Last reply
        0
        • D Offline
          D Offline
          danny
          wrote on last edited by
          #4

          I actually tried:

          Bildschirmfoto 2021-05-20 um 20.19.00.png

          1 Reply Last reply
          0
          • D Offline
            D Offline
            danny
            wrote on last edited by
            #5

            Dear @Richard,

            it shouldn't be to hard to change the color of each menu item?

            I tried as well:

            Bildschirmfoto 2021-05-20 um 21.01.12.png

            Thanks so much. Really appreciate your help.

            best wishes

            Daniel

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Dear Daniel

              @danny

              Awesome! happy to help ✨


              Sincerely
              Richard
              1 Reply Last reply
              0
              • D Offline
                D Offline
                danny
                wrote on last edited by danny
                #7

                Dear @Richard,

                oh, but the Custom CSS didn't work.

                How can I change to color of each menu item?
                And how can I change the size of each menu item?

                Thanks a lot.

                Best wishes

                Daniel

                1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by Richard
                  #8

                  Dear Daniel

                  @danny

                  In this case you are targeting a link <a>. Also the color has been defined somewhere else so you must override with !important

                  .menu-item-240 a {
                      color:red !important;
                      font-size:40px;
                  }
                  

                  Please note, respectfully Daniel that if you wish to go deeper into customising Laytheme it is up to you to research how Basic CSS and HTML function, i am unfortunately unable to maintain a tutorial like this even though i wish to help.

                  Have a wonderful day Daniel and thank you for supporting Laytheme.


                  Best
                  Richard
                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    danny
                    wrote on last edited by
                    #9

                    Dear @Richard,

                    thanks a lot! Works great!

                    Now for the Lightbox Captions, this seems to be a bug. Could you have a look? http://laythemeforum.com:4567/topic/6897/lightbox-caption-alignment

                    Have a nice day!

                    Best

                    Daniel

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #10

                      Dear Daniel

                      @danny

                      Will take a look, thanks! šŸŒ


                      Best wishes
                      Richard
                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search