Shadow on the wall

Hi Sonja,

Try this CSS:

nav#site-navigation {
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

Hi Ying,

thank you, that works.
But one question:
I have seen in the css, that this is the same settings like some other elements with this shadow like:
.inside-article,
.sidebar .widget,
.comments-area,
.posttemplate,
.paging-navigation,

Can i put this Nav element in that above list, so that these settings are only once in the css file?

Yes, for sure.

So can I simply put "nav#site-navigation" in that list?
Or do I have to put a point before the list item, because all the other list items have a leading point?

Hi there,

don't add the . point, a that denotes a CSS Class attribute is being used as the CSS selector..
In Yings CSS she is using an Element Tag ( nav ) and its ID ( #site-navigation ) as the CSS selector.
To be honest the nav isn't really required.

So your list of CSS selectors can be this:

.inside-article,
.sidebar .widget,
.comments-area,
.posttemplate,
.paging-navigation,
#site-navigation {
     /* Your CSS properties here */
}

Thanks David, that works.
The fewer lines, the better, right?

Less lines of code are better :)
So this:

.inside-article,
#site-navigation {
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

is the SAME as:

.inside-article, #site-navigation {
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

and BOTH of the above are BETTER then this:

.inside-article {
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

#site-navigation {
    box-shadow: 0 0 10px rgb(232 234 237 / 50%);
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

Yeah, that's what I thought. Thanks for the explanation.

But now I found a problem after all. The shadow under the navigation disappears in the mobile view.
What could be the reason for that?

Which website should i check to see the issue ?

I think this is because of the mobile navigation. Maybe the mobile navigation also needs this css?
I have add the Website again.

Thats correct the Mobile Header is a separate element, so you need to add:

#mobile-header to your list.

Perfect, thanks David!

Glad we could be of help