Lay Theme Forum

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