Archived topic
Drop shadow on header
17 replies · Started by Helen on May 3, 2018
Hello support,
I'm going to update the site http://www.kerrycricket.com to GeneratePress Pro and Elementor as it's running on an old free theme no longer supported. The club like the drop shadow under the white site header as it exists and I'm wondering how I can duplicate that effect on the GP header please?
Is it slso possible to apply a drop shadow to the drop-down pages on the main navigation bar?
Many thanks for your help,
Helen
Hi there,
That header can be done with this method:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
Then this CSS should add the shadows:
.main-navigation {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.main-navigation ul ul {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}You can fine tune it here: https://www.cssmatic.com/box-shadow
Let me know.
Hi Leo,
Many thanks for your quick reply and assistance. I'm not very familiar with adding css, do I add that code into simple css or somewhere else please?
Thanks again,
Helen
One of these methods here: https://docs.generatepress.com/article/adding-css/
That's great Leo,
Many thanks
No problem :)
Hello!
The solution above works, but it only shows when you are at the very top of the page.
I am using a sticky header and when I scroll down the shadow doesn't show anymore.
Is it possible to add shadow to a sticky header?
Hi there,
try this instead:
.main-navigation, .sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.main-navigation ul ul {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}That worked perfect, thank you!
You're welcome
Hello again!
Is it possible to add this shadow also to the top of the footer bar?
Maybe try this:
.site-info {
-webkit-box-shadow: 0 -10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0 -10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px -10px 5px 0px rgba(0, 0, 0, 0.75);
}Thank you! :-)
Glad to be of help
You guys here at the support staff are just perfect!
Honestly, one of the best support forums I have ever used (compared to Enfold's, OceanWP's and Astra's).
Thumbs up, and keep up the good work!
