Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • 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. Add custom class to Nav Items

Add custom class to Nav Items

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 641 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.
  • R
    R
    R Seance
    wrote on last edited by
    #1

    Hello there,

    I would like to add a custom class to the main navigation items, and the site title, I'm playing around with hover effects from:

    https://ianlunn.co.uk/articles/hover-css-tutorial-introduction

    so would simply like to add, for example, the class ".hvr-buzz" to them to make them "buzz" on hover

    Is there a way to do this? I know it's possible when creating a page / project by right clicking on the element, but was wondering how to go about doing it with main navigation.

    I thought it would be better to simply add the .hvr-buss class, than to add all of the css for the buzz to eg ".menu-item, .sitetitle-txt-inner"

    Thank you!!

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

      Dear @R-Seance

      Cool! 🌻💥
      Please add the following into custom <head> content
      Located in:

      Lay Options > Custom CSS & HTML >

      <script>
          window.laytheme.on("newpageshown", function(layoutObj, type, obj){
              jQuery( ".sitetitle" ).addClass( "hvr-buzz" );
              jQuery( ".menu-item" ).addClass( "hvr-buzz" );
      });
      </script>
      

      You can see here as an example i have used the class "hrv-buzz" to apply a background colour to the menu-items and site title:

      Screen Shot 2021-05-11 at 4.44.42 PM.png


      https://api.jquery.com/addclass/

      https://laytheme.com/documentation.html#custom-javascript


      Hope this helps @R-Seance & have a wonderful day

      Sincerely
      Richard
      1 Reply Last reply
      0
      • R
        R
        R Seance
        wrote on last edited by
        #3

        Awesome, looks perfect. Thanks for the help!

        1 Reply Last reply
        1
        • RichardR
          RichardR
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Best wishes @R-Seance , good luck for the rest of your project! 🌝

          1 Reply Last reply
          0

          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

          With your input, this post could be even better 💗

          Register Login
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          Online Users
          A
          Anna_S
          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