Add shadow to header

Hi Support Team,

I like to add a shadow or a thin grey line at the bottom of the header (with the logo and menu) so, when scrolling, the header section is always separated from the scrolled page content.

How can I do that?

Hi there,

Put this CSS code in: Customize > Additional CSS:

.site-header.header-scrolled {
    box-shadow: 0px 5px 5px 0px #888888;
}

Regards,
Awan

Thanks Awan,

Is perfect.

Have a nice day.

Hi,

Can you keep that shadow in the header constantly? Not just while scrolling

Hi J,

Please try this:

.site-header {
    box-shadow: 0px 5px 5px 0px #888888;
}

Regards,
Awan

Not really what I meant Awan, I want to keep that opacity you get when scrolling but to stay like that all the time.

Can you do that?

Hi,

Yes… both code in above should worked. Or you can also to combine theme like so:

.site-header, .site-header.header-scrolled {
    box-shadow: 0px 5px 5px 0px #888888;
}