Hestia

Hestia comes with a built in Max Mega Menu theme, so the first step is to go to Appearance > Menus > Max Mega Menu Settings and set the Theme to “Hestia”.

If you want to use the default Max Mega Menu theme instead, make sure you have set the Mega Menu > Menu Themes > Mobile Menu > Responsive Breakpoint option to 768px.

To make the mobile menu expand to the full width of the page, go to Appearance > Customize > Additional CSS and add the following:

@media (max-width: 768px) {
    body.mega-menu-primary header div.container {
        width: 100%;
        padding: 0;
        padding-top: 0 !important;
    }
    body.mega-menu-primary-mobile-open header div.container {
        max-height: 100vh;
        height: auto;
    }
    body.mega-menu-primary header .navbar-header {
        display: none;
    }
}

@media (max-width: 768px) {

body.mega-menu-primary header div.container {

width: 100%;

padding: 0;

padding-top: 0 !important;

}

body.mega-menu-primary-mobile-open header div.container {

max-height: 100vh;

height: auto;

}

body.mega-menu-primary header .navbar-header {

display: none;

}

Max Mega Menu Documentation

Mobile Menu

Related Articles