Hi team,
I have built a mega menu using static blocks. Im trying to make it full width (100vw) however there are still gaps either side. I’ve used a code snippet which I’ve found in the forums:
.header-wrapper .et_b_header-menu .menu .item-design-mega-menu.menu-item-has-children {
position: static;
}
.header-wrapper .et_b_header-menu .item-design-mega-menu .menu-static-block.nav-sublist-dropdown {
margin: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100%;
}
.header-wrapper .et_column {
position: static;
}
The custom css works and makes the mega menu full width. However it’s buggy. The columns in the menu seem move to the right not centered. A few refreshes of the screen it sometimes centers and sometimes not.
Also it is impossible to move the cursor onto the mega menu to choose a selection as there is a gap between the nav link and menu.
How are we able to get a full width mega menu working properly?