[Support request] Add shadow below the sticky header

[Shami]

I’m using this code to add a sticky header:
.site-header {
position: sticky;
z-index: 999;
top: -10px;
}

How can I add a little shadow at the bottom of the header to make it look cool?

[David]

Hi there,

include a box-shadow property in your CSS like so:

.site-header {
    position: sticky;
    z-index: 999;
    top: -10px;
    box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.5);
}

This app generates box-shadow CSS for you:

https://cssgenerator.org/box-shadow-css-generator.html

[Shami]

Thanks. Looks good.

[David]

Glad to be of help

[Author]

Posts