[Resolved] mobile header box-shadow

[Norman]

Hi, so I managed putting a box-shadow under the desktop header, but it doesn’t work on mobile.

I used this CSS code:
.site-header
{
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
}

For the mobile version I used this CSS:

.inside-navigation.grid-container.grid-parent
{
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
}

This CSS sort of works, but it gives me a shadow under the main navigation (so not the complete header) in the desktop version too.

I could give you the link, but I restricted the site, because I don’t want it indexed yet..

[Tom]

Feel free to email the link: https://generatepress.com/contact/

Just be sure to reference this thread.

Thanks!

[Norman]

I couldn’t find an email address, but here is the link: **

Thanks

[Tom]

Instead of: .inside-navigation.grid-container.grid-parent

Try: #mobile-header

[Norman]

It doesn’t seem to work..

[Tom]

Hmm think I see the issue.

1. Set the body background to white: Colors > Body.
2. Then add this CSS:

#mobile-header {
    margin-bottom: 10px;
}

[Norman]

It worked!:D

[Tom]

Awesome 🙂

[Author]

Posts