Archived topic
Shadow on main menu
3 replies · Started by Ben on December 18, 2020
Viewing posts 1–4 of 4
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?
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.
Spot on, thanks David
You're welcome
This archived topic is closed to new replies.
