Docs

[kbosland]

Hi
I am looking to do something like this on my header. I want it to blend in the picture (don’t worry about the logo in the center) but as I scroll I want it to go white and then scroll down with the user. Is that possible?

http://gabbybernstein.com/guided-mala-meditation-satya/?inf_contact_key=82e6d403c2641c5fd8605e32a946cc7d02677e577f244c1a298d12391e4f93df

My website is livefree.staging2.bosland.com

Thanks!

[Christopher]

Hi there,

Please find and remove this code :

.x-navbar {
    position: absolute; 
    width: 100%;
    top: 0;
    background-color: transparent;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
}

Add this :

.x-main.full {
    margin-top: -90px;
}

Please add following code in Customize -> Custom -> Global JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').css("background-color","white");
		} else {
			$('.x-navbar-fixed-top').css("background-color","transparent");
		}
	});
});

Hope it helps.

[kbosland]

Very cool, thank you. There is still a small line when it is in picture mode. I also have sliders on several other pages that I would like to do the same is that possible?

[kbosland]

When I render the page it comes in with the white bar and then when I reload a couple of times it comes in with the picture. Is there a way to make it more consistent?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

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

Hope that helps.

[Author]

Posts