Docs

[charlescthomson]

Hi Support!

Couldn’t seem to find an answer to this question in the forums.
I`d like to have the font in my main nav menu change colour as I scroll. Any help would be appreciated!

http://www.cefoodexperience.ca

Thanks!

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

You also could provide us instead if you prefer the JS and CSS codes you are using at the moment to achieve the scrolling effect.

Thanks,

Joao

[charlescthomson]

This reply has been marked as private.

[Jade]

Hi Charles,

Please update your JS code to:

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

Then add this CSS in the customizer:

.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

Hope this helps.

[charlescthomson]

Unfortunately, that did not work!

Any other ideas?

Cheers,

[Rupok]

Hi there,

I can’t see the suggested code on your site so not sure if you really added this or took it off. Would you keep the code and update us?

Cheers!

[charlescthomson]

Sorry about that!

I seem to have gotten it to work by using the code you provided. Works like a charm!
However, it removes the nav link hover colour once scrolled. Is there a quick solution to that?

Cheers!

[charlescthomson]

From above:

Sorry about that!

I seem to have gotten it to work by using the code you provided. Works like a charm!
However, it removes the nav link hover colour once scrolled. Is there a quick solution to that?

Cheers!

—————-

I’ve also noticed that the transparent scroll to white and the nav link colours only work on the home page.
Could you please suggest how I correct that?

Thank you kindly!

[Joao]

Hi There,

Please keep all the code as you have now and add the following code to your Customizer / Custom / CSS

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}

Hope that helps,

Joao

[charlescthomson]

Thanks!

[Joao]

You are welcome.

Joao

[Author]

Posts