Transparent Fixed Navbar with opaque header

Support
#1

I would like for the header on this website to be static with a transparent background up top, and upon scrolling have an opaque white background. When initial scroll there will need to be a smooth fade in.

#2

Hello @sriggs9110,

Thanks for asking. :slight_smile:

You can take a look at the solution mentioned in following tutorial:

https://xthemetips.com/transparent-fixed-header/129/

Please note that we don’t have any affiliation with xthemetips.com.

Thanks.

#3

I did exactly as the instruction said and it did not work. It is just a static white the whole time, not transparency.

#4

Hi there,

Please remove the codes you have added and try this simpler solution instead.

Add this code in the Global CSS:

.masthead {
  position: absolute;
  width: 100%;  
}

.x-navbar {
  background-color: transparent; 
  border-bottom: 0;
  box-shadow: none;
}

.x-navbar-fixed-top {
  background-color: #fff;
}

Then add this code in the Global JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

});

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.