Shadows for navbar?


Active member
I have successfully added a shadow around the edges of my website with this code:
#content .pageContent {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);}

but now the problem is that I would like this shadow to continue around the outer side of the navbar. If I implement this in the navigation.css template, I get a shadow all around the navigation, also under it, which I don't want.

Any ideas how to fix this?


Well-known member
For the navbar this should be a close match to what you posted above.
#navigation .pageContent {
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15), -3px 0px 3px rgba(0, 0, 0, 0.15);
Or you could try a light shadow along the whole pageWidth including the header area with this...
.pageWidth {
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1), -1px 0 3px rgba(0, 0, 0, 0.1);


Active member
Actually adding your first code worked the best, then I just have the problem of implementing the shadow to the header without giving shadow to the top of the navbar. The second option gave shadow to the top and the bottom of the navbar, which I don't want. The picture below shows exactly what I would like to achieve.

Skärmavbild 2012-02-16 kl. 09.10.25.png

Skärmavbild 2012-02-16 kl. 09.10.41.png

On the last picture I would like the shadow to curve around and be on the bottom of the footer.

Thank you very much for your help steel_curtain