Transparent Background Header to White Background Header

[jmcve146]

I have spent a lot of time trying to figure this one out, and searched many of the existing threads but none of the code is working for me.

For my home page only I want the fixed header background to appear transparent over the slider. Once you scroll past the slider I want the header background to appear white. Thanks.

[jmcve146]

I’m currently using the following code.

Cornerstone > CSS:
.x-navbar {
background-color: #ffffff;
}

@media(min-width: 960px){
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: 0;
}

.home .site .masthead .x-navbar {
background-color: transparent;
transition: all 0.5s linear;
}

.home .site .masthead .x-navbar.x-navbar-solid {
background-color: #000;
background-color: rgba(0,0,0,0.75);
}
}

Cornerstone > Javascript:
jQuery(document).ready(function($) {

var $body = $(‘body’);
var $navbar = $(’.x-navbar’);

if ( $body.hasClass(‘x-navbar-fixed-top-active’) && $navbar.length > 0 ) {

$(window).scroll(function() {

  if ( $(this).scrollTop() >= 350 ) {
    $navbar.addClass('x-navbar-solid');
  } else {
    $navbar.removeClass('x-navbar-solid');
  }

});

}

});

[nabeel]

Hi there,

Thanks for writing around! Please remove all of your customization and scripts and then add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.page-id-1176 .x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $(".page-id-1176 .rev_slider_wrapper").outerHeight();
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.page-id-1176 .x-navbar, .x-navbar-fixed-top').attr('style','background-color: #fff !important');
		} else {
			$('.page-id-1176 .x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[jmcve146]

Thank you, this code has gotten me closer than anything else so far!

Here are two more related issues that I’m not able to figure out right now.

1. There is still a white object behind the navbar so that it doesn’t appear transparent. See attached screenshot.
   

2. What’s the best way to make the navbar text white and a white version of the logo appear while the navbar is transparent? (Of course this should not take place in mobile)

I’d appreciate your help!

[christopher]

Hi there,

It seems that the problem for the case is the Revolution Slider itself. I suggest that you follow up the case following the guide below:

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

You will need to implement the method mentioned in the article before we can tackle the second question.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.