Archived topic
Sticky Header
5 replies · Started by Suman on March 29, 2023
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.
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-information
Let 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.
