Change menu item color on scroll
-
Hello everyone,
I'm trying to realize a navigation bar that changes color on scroll, I have successed in adding the Jquery to change the color of the navigation bar, thanks to this forum.
However, I find no solution to change the color of the menu item, as the class of the navigation bar applied by wordpress does not want to be overrided. Does anyone know a possible solution?I include the code I've tried to use already. I also tried to use the same function for the menu item as the one for the nav bar but it did not work at all.
By inspecting the website I can see that the class is being added to whatever element I add it to, however it does not override the other class.Any help would appreciated, thank you.
<script> jQuery(document).ready(function(){ jQuery(window).scroll(function() { // check if scroll event happened if (jQuery(document).scrollTop() > 600) { // check if user scrolled more than 50 from top of the browser window jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff) } else { jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent } }); }); jQuery(document).ready(function() { jQuery(window).scroll(function() { if (jQuery(document).scrollTop() > 600) { jQuery("nav").addClass("menuitemblack"); } else { jQuery("nav").removeClass("menuitemblack"); } }); }); </script> .menuitemblack { color: red !important; z-index: 30; }
-
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.
Now see if your problem solved itself.
Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it
I don't answer or check forum DMs, please just post on the forum.