Change Navigation Bar on Scroll

Did you add in the link for mynav.js? When I try to look for the file:

https://www.gcs-ltd.com/assets/js/mynav.js

I get a 404 error (page not found). Did you upload it to the folder? And what javascript code did you add to detect when the user scrolls the window?

So, the basic steps would be:

1. Create an event handler in your document ready function for the window scroll event. In that event handler, you are going to detect how far the user has scrolled, and depending upon whatever threshold you’ve selected, you’re going to add a class to the nav bar, like scrolled.
2. Then, in your CSS, you just define the properties for the scrolled class, like color or background-color.

The basic principles can be found in this article. The article talks about how to set a menu to be fixed once the user has scrolled a certain amount, but you can generalize it to set any property, not just fixing the position.

https://www.gcs-ltd.com/testsite/wp-content/themes/Kaiser/assets/js/mynav.js

maybe i linked it wrong?

The bar is transparent and I want it to change colors when users scroll down…Im a little newer to jquery to its a bit confusing

Are you making changes right now? Because now I don’t see the link to the mynav.js in your source. It used to be at the link I listed above.

https://www.gcs-ltd.com/testsite/wp-content/themes/Kaiser/assets/js/nav2.js

sorry i was changing it

Yes, the link is incorrect. If you examine the site using Chrome DevTools, in the console window you’ll see this error:

Failed to load resource: the server responded with a status of 404 (Not Found) https://www.gcs-ltd.com/assets/js/nav2.js

(There are a few other errors, too, that you should look at). Try this, instead:

wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/js/nav2.js', array('jquery'));

By the way, is the Kaiser theme a theme that your company developed or did you get it from a third party? If it’s a third-party theme, you should avoid directly modifying the theme files, because the next time you upgrade/update the theme (which can have varying degrees of likelihood depending upon how diligent the theme developer is on fixing bugs, making security patches, or adding enhancements), your changes will be lost. The suggested method of making changes to a theme is to create a child theme or use plugins for adding CSS or JavaScript (if the theme doesn’t already have an option for supporting that).

https://www.gcs-ltd.com/assets/js/nav2.js is the wrong link.

this is the right link https://www.gcs-ltd.com/testsite/wp-content/themes/Kaiser/assets/js/nav2.js

its a test site,

and where do i put this?

wp_enqueue_style( ‘my-style’, get_template_directory_uri() . ‘/assets/js/nav2.js’, array(‘jquery’));

Stylesheets are usually enqueued in the functions.php file. If you search through yours, you’ll probably find a function that has a bunch of other calls to wp_enqueue_style. You can put it in there. In fact, you can use one of those function calls as a model.

cant seem to find it.

as far as my coding what is wrong? can you please help.

I don’t know enough about the theme to tell you where else to look. I guess you can always try hardcoding the full path name into the link in your header.php file, then:

<?php wp_head(); ?><script type="text/javascript" src="https://www.gcs-ltd.com/testsite/wp-content/themes/Kaiser/assets/js/nav2.js"></script>

As far as the code goes, try this:

jQuery(document).ready(function($){
  $(window).scroll(function () {
      if ($(this).scrollTop() > 50)
      {
         $("nav.menu").css("background", "red");
      }
      else
      {
         $("nav.menu").css("background", "transparent");
      }
    });
);}

Change the number 50 to whatever threshold you want.