[Resolved] Header drop-shadow

[Matt]

How can I add a drop-shadow under the entire length of header?

I’ve used this CSS which works great on the sticky header but on desktop the ‘normal’ header doesn’t have a drop-shadow under most of the header.

If I apply the box-shadow to the primary nav instead – I get a shadow to the left and right of the primary navigation – not what I want.

#mobile-header .inside-navigation, .main-navigation {
border-bottom-color: rgba(0, 0, 0, .05) !important;
box-shadow: 0 2px 8px 0 rgba(16, 7, 104, .07) !important;
}

[Leo]

Hi there,

Edit your CSS to this:

#mobile-header .inside-navigation, .main-navigation {
    border-bottom-color: rgba(0, 0, 0, .05) !important;
    box-shadow: 0 2px 8px 0 rgba(16, 7, 104, .07) !important;
    position: relative;
}

[Matt]

Perfect, thanks Leo.

[Leo]

No problem 🙂

[Author]

Posts