Add custom class to Nav Items
-
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!!
-
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:
Hope this helps @R-Seance & have a wonderful day
Sincerely
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- 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:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it