June 8, 2017
Make Mega Menus appear full-width
Author:
David Waumsley
Description:
Make Mega Menus appear full-width with this CSS.
Kind:
CSS, Beaver
CSS:
UL.fl-menu-horizontal LI.mega-menu > UL.sub-menu:after
{
content: "";
display: block;
position: absolute;
left: 50%;
top: -1px;
height: 101%;
width: 100vw;
transform: translateX(-50%);
z-index: -1;
box-sizing: border-box;
border-top: 1px solid #efefef;
background-color: #efefef;
/* This is for full width shadow.
You need to turn off "sub-menu drop shadow" in the menu module.
Remove this if not needed. */
-moz-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
-webkit-box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
box-shadow: -2px 4px 9px 0 rgba(134, 134, 134, 0.451);
}