[clatch16Participant]

Hi,

I’ve done some reading and tweaking, but I can’t for the life of me find out where I’m setting the background color.

My navbar is transparent and its still showing white until I scroll down through the header.

So I think I’m setting the body background to white somewhere?

Help!

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

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

Thank you.

[clatch16Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thank you for providing the information. To resolve this issue, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

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

Hope this helps. Please let us know how it goes.

[clatch16Participant]

Thanks.

It’s now working for desktop view but mobile view still shows it as white?

[LelyModerator]

Hi There,

Please update above CSS to this:

  body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px;
  }

Hope this helps.

[clatch16Participant]

That’s it thanks…but now when I scroll the navbar background is not appearing.

Can it be transparent until I scroll and then say 30% transparent like before?

[clatch16Participant]

Also, the Navbar is no longer fixed in mobile view….so it just stays at the top when I scroll?

[JoaoModerator]

Hi There,

To have your navbar changing color when scrolling please add the following code to Appereance Customizer Custom Javascript:

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

And the following code to Appereance Customizer Custom CSS

.x-navbar.x-nav-trans {
    background-color: rgba(255,255,255,0.4) !important;
}

To make the navbar on mobile fixed please add the following code to Appearance Customizer Custom CSS

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Hope it helps

Joao

[clatch16Participant]

Thanks Joao!

I hate to come back with something, but now on first load the 40% navbar shows.

It’s fine once I scroll down and scroll back up, it disappears and the bar is 100% transparent….it’s just the initial page load.

Any ideas why it would do this?

(the code for fixing the mobile navbar worked perfectly thanks!)

[JoaoModerator]

Hi There,

Please use the following code instead on your Custom > Javascript:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

[clatch16Participant]

That worked! Thank you guys so much for your help!

[JoaoModerator]

You are very welcome 🙂

[Author]

Posts