- This topic has 17 replies, 4 voices, and was last updated 5 years, 1 month ago by
.
-
Posts
-
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,
HelenCustomer Support
Hi there,
That header can be done with this method:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-headerThen 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,
HelenOne of these methods here: https://docs.generatepress.com/article/adding-css/
That’s great Leo,
Many thanksNo 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?
Customer Support
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!
- The topic ‘Drop shadow on header’ is closed to new replies.
