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); }