[Resolved] Bottom of the Header

[Sanu Kumar]

I would like to give a similar look like this at the bottom of the header like shadow effect. https://ibb.co/G5xYx2p

[Leo]

Hi there,

Can you link me to the example site in question?

[Sanu Kumar]

That was my site. I designed with the help of elementary but it is not live now. Similar to this, elementor is also using the same which I want to achieve. Here’s the link
https://elementor.com/about/privacy/

[David]

Try this CSS:

.site-header {
    box-shadow: 0 2px 20px 0px rgba(0, 0, 0, .2);
}

[Sanu Kumar]

I am looking for this: https://ibb.co/G5xYx2p

[David]

Edited code above.

[Sanu Kumar]

Thanks, David..you’re awesome.

But I want to exclude one page (homepage only) because I am using transparent and I want it remains the same. Only on the homepage. How to do it?

[David]

Change: .site-header to body:not(.home) .site-header

[Sanu Kumar]

Thanks David

[David]

You’re welcome

[Sanu Kumar]

hey David,
I just checked this is working on desktop only and not on mobile. I want it on mobile too.

[David]

Use this CSS:

body:not(.home) .site-header,
body:not(.home) #mobile-header .inside-navigation {
    box-shadow: 0 2px 20px 0px rgba(0, 0, 0, .2);
}

[Author]

Posts