Archived topic

Add shadow below the sticky header

3 replies · Started by Shami on February 6, 2021

Viewing posts 1–4 of 4

February 6, 2021 at 11:26 pm #1648735

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?

February 7, 2021 at 6:26 am #1648986

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:

February 7, 2021 at 6:46 am #1649007

Thanks. Looks good.

February 7, 2021 at 8:11 am #1649260

Glad to be of help

This archived topic is closed to new replies.