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;
}