Docs

[GFF-Flight]

hey there

i want to have a transparent menubar and the revslider behind my bar. when start scrolling menubar should chnage into a white background

and this effect should only occur on ym home page not on subsites

is this possible ?
my site: http://test.geldfuerflug.com

thank you

[Christopher]

Hi there,

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

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

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

@media (min-width:979px){
.home .x-navbar.x-navbar-fixed-top.white {
    background-color: rgba(255,255,255,0.8);
transition: all 0.3s linear;
}

.home .x-navbar.x-navbar-fixed-top.transparent-navbar {
    background-color: transparent;
border: none;
    box-shadow: none;
transition: all 0.3s linear;
}
.home header.masthead.masthead-inline {
    position: absolute;
}
}

Hope that helps.

[GFF-Flight]

almost… the menu bar is first in the left corn3er when u load the page and goes to the right place after u scroll a little bit.. also the bar is still a lkittle transparent when u scroll and turns not completely white

[GFF-Flight]

[Thai]

Hey There,

Please also add this CSS:

header.masthead.masthead-inline {
    width: 100%;
}

Hope it helps 🙂

[Author]

Posts