Code by Day | Explore By Weekend

How To Change The Divi Menu Module Responsive Breakpoint Tutorial by Pee-Aye Creative

How To Change The Divi Menu Module Responsive Breakpoint

This quick Divi tutorial and code snippet will show you how to easily change the Divi Menu module responsive breakpoint to any screen size you want.

Show Divi Mobile Menu On Larger Screen Sizes

The first step in our short tutorial is to copy and paste a code snippet into your Divi website. This CSS snippet will essentially change the Divi Menu module responsive breakpoint by causing the mobile menu to display on larger screen sizes. The cool part is that we can tell it.

The CSS snippet is telling the browser to display the mobile version of the Divi menu at a wider screen than the default. 

To show the Divi hamburger on larger screen sizes, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save.

/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1149px) {
    .et_pb_menu .et_pb_menu__menu {
        display: none;
    }
    .et_mobile_nav_menu {
        display: block
    }
} 

Next, feel free to adjust the 1149px value to whatever you want. Keep in mind that by default, the Divi Menu responsive breakpoint is 980px, so anything larger than that will work.

TIP: You can find the correct number by using your browser inspect tool. Just right-click on your website, find the “inspect” option, and then look for the tablet/phone icon. From you, you can drag your screen size large or small and it will tell you the pixel size.

If you have a dropdwon submenu, then you may have an issue with bullet points being added to the submenu list items. So just add this additional code to solve that if you are facing that issue.

/*remove bullet points from submenu*/
.et_pb_menu .et_mobile_menu .entry-content ul {
  list-style-type: none;
}

/*remove padding left on submenu*/
.et_pb_menu .et_mobile_menu {
    padding-left: 0;
} 
43
Last updated Feb 11, 2021 @ 12:47 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
29 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jeremiah
10 months ago

In Divi 4.4.6 and later, this should be changed to:

/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1160px) {
#top-menu-nav {
display: none;
}
#et_mobile_nav_menu {
display: block
}
}

Jen
Jen
Reply to  Jeremiah
5 months ago

Thank you Jeremiah!!
I couldn’t work out why the media queries wasn’t working – I am using the default menu, so you’ve saved my sanity, thank you 🙂

Andy
Andy
Reply to  Jeremiah
29 days ago

and me … that really helped

wittenboer
wittenboer
Reply to  Jeremiah
26 days ago

Tried both the codes in the divi theme options but no luck on my ipad 10.2 inch with a landscape viewport of 1024 px wight. What am i doing wrong.

I think i use the standard divi menu

Hemant Gaba
Hemant Gaba
Reply to  wittenboer
9 days ago

Could you please tell us that what you are trying to achieve and also share the website URL for more clarity and further investigation?

wittenboer
wittenboer
Reply to  Jeremiah
26 days ago

Have to add some other info. Needed to set my standard primary menu to full width

wittenboer
wittenboer
Reply to  Jeremiah
26 days ago

this code worked for me;

@media (

max-width

:

1024px

) {
 

#et_mobile_nav_menu {
 

display

:

block

;
 

}
 
#top-menu {
 

display

:

none

;
 

}
 

}

Clay Ravin
Clay Ravin
9 months ago

Hi, thanks for this Nelson!
 
I still had some problems with this it for some bizarre reason Divi wraps its mobile menu styling in media queries. And because my full-width menu is right aligned.
 
I also had to wrap the following in your media query…
 

.et_pb_fullwidth_menu .et_mobile_menu, .et_pb_fullwidth_menu .et_mobile_menu ul, .et_pb_menu .et_mobile_menu, .et_pb_menu .et_mobile_menu ul {
list-style: none!important;
text-align: left;

 
And then, because my full-width header is fixed and that definitely doesn’t work with a drop-down mobile menu, I had to add the following to your media query as well…
 

header .et_pb_section_0_tb_header {
  position: relative!important;
}

 
Cheers,
Clay

Clay Ravin
Clay Ravin

I phrased that badly Nelson. It’s just a custom header section that happens to be full-width.

Ben Wilson
8 months ago

Thanks for the help with this issue. I have a design question. Client wants the hamburger fix in the main menu (done), but then display normal menu in footer. I assume I can wrap menu in a class, but not having any luck.

Ted Carron
Ted Carron
7 months ago

I’m going mad. I am following your instructions in Aug 2020 (on a freshly downloaded and installed version of the divi theme) and it is just plain doing nothing. The hamburger transition happens at the same point regardless of what number I put in as the breakpoint.

Interestingly I have searched all the source files using chrome and I can’t find the number I put in anywhere.
I have tried putting the css in the theme options and theme customisation too.

Nothing – if you could help me that would be great.

Last edited 7 months ago by Ted Carron
David Andora
5 months ago

I keep trying all of your various menu module codes with variations with no success. I’d like to confine the mobile version of my module-based menu to 768px and smaller. Desktop version on everything larger. I tried this snippet set to 768 px, but see no difference. Mobile menu still showing up until 980.

David

Doh! I’m gonna go outside and cry for a while. lol. I’ve turned off caching, removed all other custom CSS… disabled many plugins. There’s definitely something off. Thanks for looking! Where’s a good place to hire a divi expert for last minute troubleshooting?

Peter
Peter

He does not solve anything. Still the same question: How to change the breakpoint below 980px?

Arvie U Bragas
5 months ago

Hi, great tutorial!

However, I want to make my whole header change responsive breakpoint not just the menu.

How can I go about it?

Here is the site I am working on: http://www.hi.linux.hostaway.net.au

Philipp
Philipp
2 months ago

Hi Nelson,

using your approach the search icon is not alligned with the hamburge rmenu.
Do you have a solution for this?

Thanks for all your amazing tutorials! 🙂

Philipp
Philipp
2 months ago

Found the solution myself, but still wondering why I need that margin-top. at 980px its displaying the menu bar correctly.

/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1149px) {
   .et_pb_menu .et_pb_menu__menu {
       display: none;
   }
   .et_mobile_nav_menu {
       display: block
   }
}

@media only screen and (min-width: 981px) {
   .mobile_menu_bar {
       margin-top:15px;
   }

}

Rob
Rob
1 month ago

Is there a way to change the breakpoints so that when you’re using the Theme Builder or the Divi Builder on a page, when you click a tablet or mobile icon to change something, that it obeys a different breakpoint limit? I’m asking because while the CSS idea works great for the menu, there are other parts of the page that also need adjusting at that breakpoint, but Divi seems to cling to its built-in breakpoints.

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart