Archived topic

Navigation bar bottom shadow (Static and Sticky)

3 replies · Started by Rob Cruz on November 20, 2018

Viewing posts 1–4 of 4

November 20, 2018 at 4:41 am #731961

Hello!

So I added this CSS to achieve the shadow:


#site-navigation {
	-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
	box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

I found that css code on here and it seemed to work for others but not on my site. I wonder why? The shadow doesn't extend all the way the navigation bar. I wanted it to look like this.

What changes should I make? Thank you.

Rob

November 20, 2018 at 4:55 am #731972

Hi there,

try this CSS instead:

#masthead {
	-webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
	box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

November 20, 2018 at 4:06 pm #732794

Thanks David, it worked! It also works on sticky navigation as well, in case others are wondering.

November 21, 2018 at 1:37 am #733061

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.