Archived topic
mobile header box-shadow
7 replies · Started by Norman on April 27, 2017
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..
Feel free to email the link: https://generatepress.com/contact/
Just be sure to reference this thread.
Thanks!
I couldn't find an email address, but here is the link: **
Thanks
Instead of: .inside-navigation.grid-container.grid-parent
Try: #mobile-header
It doesn't seem to work..
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;
}It worked!:D
Awesome :)
