How To Change The Divi Mobile Menu Breakpoint

Mark Hendriksen | April 28, 2021 | 3 Comments

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.

Mobile breakpoin on 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.

You might also like…

3 thoughts on “How To Change The Divi Mobile Menu Breakpoint”

  1. 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.

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet