- This topic has 5 replies, 2 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
How can I add a shadow to my sticky header while it’s scrolling?
The shadow will help distinguish it from the white space.
I have used the following CSS code:
header.site-header {
position: sticky;
top: 0;
z-index: 10001;
}I got this from another thread.
Customer Support
Hi there,
Any chance you can link us to your page in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-informationLet me know 🙂
Sorry I forgot to mention my website.
It’s not possible to add a box shadow to sticky mode only with your current set up as it’s using CSS.
Have you considered using the navigation as a header option to create the current header layout?
https://docs.generatepress.com/article/navigation-as-a-header/Then you can activate the sticky navigation option which has box shadow added by default:
https://docs.generatepress.com/article/sticky-navigation/Is it possible to add a shadow using CSS?
You can add the following line to your existing CSS:
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);However, this will add shadow to both static and sticky modes.
- You must be logged in to reply to this topic.
