Change header from transparent to opaque on scroll

[hypnorich]

So this guy in this thread https://theme.co/apex/forum/t/transparent-menu-turn-color-on-scroll/33034 wanted to do the same thing I do…

I would like the header logo to be transparent when the page loads but as the viewer scrolls down the page I would like the logo to shrink and for the height of the whole header to shrink and the background to become opaque.

Would using the same code you gave the other guy work on my site? Do I need certain JS and CSS?

Thanks!

[nabeel]

Hi Richard,

Thank you for reaching out to us. To achieve navbar scrolling effect, first add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('header.masthead').addClass("x-scroll-effect");
	$(window).scroll(function(){
		if( $(this).scrollTop() == 0 ) {
			$('header.masthead').removeClass("x-scroll-effect");
		}else{
			$('header.masthead').addClass("x-scroll-effect");
		}
	});
});

Then add the following code in the Theme Options > CSS:

body header.masthead .x-navbar-wrap .x-navbar {
	background: rgba(255,255,255,0) !important;
}
body header.masthead.x-scroll-effect .x-navbar-wrap .x-navbar {
	background: rgba(255,255,255,1) !important;
}
body header.masthead.x-scroll-effect .x-brand img {
    max-width: 60%;
}
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar-wrap, 
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar-inner,
body.x-navbar-fixed-top-active header.masthead.x-scroll-effect .x-navbar .desktop .x-nav>li>a {
	height: 60px;
	min-height: 60px;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thanks!