< Back to Style Guide
Mobile Menu
There are a couple of issues we might run into with Divi’s mobile module.
Adjusting breakpoints
When your nav bar is long, you might want to adjust the breakpoints so that the menu shrinks into a hamburger menu before it starts wrapping to the next line.
Copy this code to Theme Customizer, and adjust the screen size as needed.
@media only screen and (max-width: 1149px) {
.et_pb_menu .et_pb_menu__menu {
display: none;
}
.et_mobile_nav_menu {
display: block;
}
}
Collapsible Sub-menu
For mobile menus, best practice is to collapse sub-menus and turn the parent item into a “toggle”. And add a duplicated parent-item to the sub-menu.