[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How To Change The Divi Mobile Menu Breakpoint

Mark Hendriksen | April 28, 2021 | 3 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

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