In this tutorial, we are going to change the mobile menu breakpoint in Divi. The mobile menu breakpoint starts at 980px and in some cases, this can be too soon. For example, if you have many menu items in your menu, it can break down into two lines.
To fix this we can extend the breakpoint to for example 1300px.
This is surprisingly easy to do and just needs a little bit of CSS.
Mobile breakpoint for default Divi menu
Use this CSS snippet if you are using the default menu in Divi.
/* ### Menu breakpoint for default menu ### */
@media only screen and (max-width: 1300px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}}Mobile breakpoint for menu created in the Theme Builder
If you have created a custom menu in the Theme Builder then use this CSS snippet.
/* ### Menu breakpoint for the theme builder ### */
@media only screen and (max-width: 1300px) {
.et_pb_menu .et_pb_menu__menu {
display: none !important;
}
.et_mobile_nav_menu {
display: block !important;
}}How to change the mobile breakpoint
You can change when the mobile breakpoint will start by changing the max-width value. In the above snippets, you see this max-width: 1300px changing this value will change the mobile breakpoint.
Excellent. Thank you very much
It works but the menu is unscrollable > adding overflow:visible or scroll doesnt really fix the issue.
As the content behind the menu gets priority for scrolling making it very buggy.
Hi Chester,
If you could provide an URL then I will have a look for you.