[Resolved] Shadow on main menu

[Ben]

Hey Guys,

I’m trying to add a box-shadow under the main menu using the following css;

.main-navigation {
box-shadow: 0px 2px 16px 0px rgba(0,0,0,.3);
}

But I can’t get it work.

Can you help?

[David]

Hi there,

try this CSS:

.main-navigation {
    position: relative;
}

.main-navigation,
.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,.7);
}

I increased the opacity of the rgba color to make sure its visible. Also update the Sticky nav drop shadow to match. The key fix is the position: relative on the main nav. This makes sure the nav sits over the content, otherwise the page content sits over the box-shadow.

[Ben]

Spot on, thanks David

[David]

You’re welcome

[Author]

Posts