Menu background change color on scroll broken since last update

[vayana]

Hi,

I used some Jquery and CSS to change background color of the menu from transparent to white as soon as you scroll down, but this stopped working in the latest update. So now the menu background doesn’t change color anymore when you scroll down, even though the same jquery & css are still used. What’s caused this to stop working?

These are the snippets used for this purpose:

jQuery(function($) {
$(window).scroll(function(){
if($(window).scrollTop() >50) {
$(’.x-navbar’).addClass(“x-navbar-solid”);
}else {
$(’.x-navbar’).removeClass(“x-navbar-solid”);
}
});
});

and CSS:
.x-navbar-wrap {
height: auto !important;
}

.x-navbar {
background-color:transparent;
border:0;
box-shadow:none;
position: fixed;
width:100%;
}

.x-navbar-solid {
background-color:white;
transition: all 0.3s ease 0s;
}

[nabeel]

Hi there,

Thank you for reaching out to us. That’s because you’ve updated only Cornerstone and haven’t updated X. This is a version compatibility issue which is breaking the functionality on your site. Always make sure to update both X and Cornerstone to the latest versions to avoid such conflicts and potential errors. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Let us know how this goes!

[vayana]

Hi Nabeel,

Thanks for that, this was indeed the cause of the issue.

[mldarshana]

Glad we were able to help

[brettfish]

Hi Themeco - I’m trying to accomplish the same effect (transparent to solid header on scroll down_ and the code here is not working for me. My URL is scopomarketing.com - can you help?

TIA

-Brett

[nabeel]

Hey Brett,

Thanks for writing in! I checked your site and I can see the header scrolling effect on my end (see screenshots)

This looks like a cache issue, just clear your browser’s cache and check the site again.

Cheers!