Make Mega Menus appear full-width with this CSS.
Here is a link on how to extend mega-menus further. It has written for the Beaver Builder theme but can be applied to the Menu Module.
Here is the link on to how to set up a mega-menu.
Here is a link to how the mega-menu can look (see "using BB").
* you may need to add extra selectors (or !important) if not adding to styles.css in the BB theme.
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);
}