Docs

[sendpire]

Hey there,

you already provided me with a great code to achieve the effect of a background-less header while on top of the page, and a solid colored background after visitors scroll down.

Now I’d like to add a box shadow to my header. BUT only when the visitor scrolls down. While on top, there should be NO shadow.

Thank you a lot! 🙂

[sendpire]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! I’ve check your site, and saw that you already have a JS code that makes the header background white when scrolled. Please update that code to this:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,1.0");
	$( '.x-navbar' ).addClass( 'shadow' );
} else {
	$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.0");
	$( '.x-navbar' ).removeClass( 'shadow' );
}
});
});

Then add this on your custom css

.x-navbar.shadow {
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.5);
}

Hope it helps, Cheers!

[sendpire]

Works like a charm 🙂

Thank you! You rock, like always!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts