Using custom CSS code, we can achieve a true fullscreen overlay Menu layout using Theme Builder and the Menu module.
Go to Divi > Theme Builder and create a Header layout. It could be a Global Header layout (which will be used on all pages) or a Header layout attached to a specific Theme Builder Template.
Inser the Menu module and adjust its styling setting to your preference:
Set the Text Color in Design Tab > Menu Text > Menu Text Color
Set the font size of your preference in Design Tab > Menu Text > Menu Text Size
Set the Text Line height in Design Tab > Menu Text > Menu Line Height - recommended value
1.2emSet the Hamburger Menu color in Design Tab > Icons > Hamburger Menu Icon Color
Increase the Hamburger menu icon size in Design Tab > Icons > Hamburger Menu Icon Font Size
Edit the Section that contains the Menu module and in Advanced Tab > CSS ID & Classes > CSS Class input
divi-fullscreen-menu
In Divi > Theme Options > General Tab > Custom CSS, copy/paste the following CSS code:
/* Align the Bamburger menu icon to the right*/
.divi-fullscreen-menu .et_pb_menu__wrap,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_pb_menu__wrap {
justify-content: flex-end;
}
/*Hide the desktop menu*/
.divi-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none;
}
/*Show the mobile menu on desktop*/
.divi-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block;
align-items: center;
}
.divi-fullscreen-menu .et_mobile_menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu {
width: 100vw;
position: fixed;
top: 0;
left: 0;
height: 100vh !important;
display: flex !important;
justify-content: center;
flex-direction: column;
padding: 0;
align-items: center;
text-align: center;
}
/*Style the opened menu*/
.divi-fullscreen-menu .opened .et_mobile_menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .opened .et_mobile_menu {
opacity: 1;
visibility: visible;
transition: visibility 0.3s, opacity 0.3s ease-in-out;
}
/*Style the closed menu*/
.divi-fullscreen-menu .closed .et_mobile_menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .closed .et_mobile_menu {
opacity: 0;
visibility: hidden;
transition: visibility 0.3s, opacity 0.3s ease-in-out;
}
/*Remove the bullet points from the list items*/
.divi-fullscreen-menu .et_mobile_menu li,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu li {
list-style: none;
text-align: center;
width: 100%;
}
/*Move the menu to the top above other elements*/
.divi-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999;
}
/*Change the opened menu icon*/
.divi-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
content: '\4d';
}
/*Make the hamburger menu fixed position on mobile*/
.divi-fullscreen-menu .opened .mobile_menu_bar,
.et-db #et-boc .et-l .divi-fullscreen-menu .opened .mobile_menu_bar {
position: fixed;
right: 22%;
}
/*remove the default blue border top on the mobile menu*/
.divi-fullscreen-menu .et_mobile_menu,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu {
border-top: none;
}
.divi-fullscreen-menu .et_mobile_menu li li,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu li li {
padding-left: 0;
}
/*Remove the default background color on menu items*/
.divi-fullscreen-menu .et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
/*Remove the default hover background color and adjust opacity*/
.et_mobile_menu li a:hover,
.et-db #et-boc .et-l .et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
}
/*Remove the default border bottom on menu items*/
.divi-fullscreen-menu .et_mobile_menu li a,
.et-db #et-boc .et-l .divi-fullscreen-menu .et_mobile_menu li a {
border-bottom: none;
}
@media (max-width: 480px) {
.divi-fullscreen-menu .opened .mobile_menu_bar,
.et-db #et-boc .et-l .divi-fullscreen-menu .opened .mobile_menu_bar {
right: 55px;
}
}
Pro Tip: Set the Row's Top and Bottom Padding and control the height of the entire Header section by setting custom values for the Section's Top and Bottom padding.