• Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • 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

Change menu item color on scroll

Scheduled Pinned Locked Moved General Discussion
2 Posts 2 Posters 122 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.
  • U Offline
    U Offline
    Ursula
    wrote on last edited by
    #1

    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;
    }
    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #2

    Dear @Ursula

    Could you please post a link to your website where you are trying to implement this and i can have a better look :)

    Best wishes and have a wonderful day

    Richard

    1 Reply Last reply
    0
  • A anamsp referenced this topic on

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

Thanks!
Post a link to where the problem is if possible, please <3
I don't answer or check forum DMs, please just post on the forum.
Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
Online Users
A
laytheme.com
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Recent
  • Tags
  • Popular
  • Users
  • Search
  • Login

  • Don't have an account? Register

  • Login or register to search.