[JadeModerator]

Hi there,

Please add this in the Custom Javascript:

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

Then add this in the Custom CSS:

.x-navbar.x-navbar-fixed-top.x-nav-trans {
    background-color: transparent !important;
}

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

.x-navbar.x-navbar-fixed-top.x-nav-trans a {
    color: #fff !important;
}

.x-navbar.x-navbar-fixed-top a {
    color: #000 !important;
}

Hope this helps.

[openers12Participant]

Thank you this works perfectly. The only thing is now when I scroll the white blends in. Can I add a black border to the header only after I start scrolling?

[openers12Participant]

I also want the hover colour to be #1e73be after I start scrolling. Sorry for all the questions but I really appreciate al your help.

[John EzraMember]

Hi there,

Thanks for updating the thread! Replace the CSS previously given with either one of the following:

.x-navbar.x-navbar-fixed-top.x-nav-trans {
    background-color: transparent !important;
    border-bottom:none;
 }

.x-navbar.x-navbar-fixed-top {
    background-color: #fff !important;
    border-bottom:4px solid #000;
}

.x-navbar.x-navbar-fixed-top.x-nav-trans a {
    color: #fff !important;
}

.x-navbar.x-navbar-fixed-top a {
    color: #000 !important;
}

If the bottom-border is too strong to your liking then you can also use a box shadow shown below:

.x-navbar.x-navbar-fixed-top.x-nav-trans {
    background-color: transparent !important;
    box-shadow:none;
}

.x-navbar.x-navbar-fixed-top {
    background-color: #fff !important;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
}

.x-navbar.x-navbar-fixed-top.x-nav-trans a {
    color: #fff !important;
}

.x-navbar.x-navbar-fixed-top a {
    color: #000 !important;
}

Hope this helps – thanks!

[openers12Participant]

That worked perfectly. Except after I start scrolling the links colour do not change when I hover over it. I want the hover colour to be #1e73be. I only want there to be a hover colour after I start scrolling. Thanks

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: #1e73be !important;
}
.x-navbar.x-navbar-fixed-top.x-nav-trans a span {
    color: #fff;
}

Hope it helps.

[Author]

Posts