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

How To Change The Divi Menu Module Responsive Breakpoint

Nelson Miller Pee Aye Creative
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.

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.3

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*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 li {
  list-style-type: none;
}

/*remove padding left on submenu*/
.et_pb_menu .et_mobile_menu {
    padding-left: 0;
}

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.3

Last updated Nov 27, 2023 @ 2:49 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

58 Comments

  1. Jeremiah

    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
    }
    }

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Jeremiah,
      The code you mentioned is for the default menu, my tutorial is for the Menu module 🙂 But thanks for sharing for those who need that!

      Reply
    • Jen

      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 🙂

      Reply
    • Andy

      and me … that really helped

      Reply
    • wittenboer

      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

      Reply
      • Hemant Gaba

        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

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

      Reply
    • wittenboer

      this code worked for me;

      @media (max-width: 1024px) {
       #et_mobile_nav_menu {
       display: block;
       }
       
      #top-menu {
       display: none;
       }
       }

      Reply
      • Sally

        That did it for me too – thanks for posting this! I was struggling to get it to work with the original code.

    • Joe

      Thank you!! Finally fixed!

      Reply
  2. Clay Ravin

    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

    Reply
      • Clay Ravin

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

  3. Ben Wilson

    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.

    Reply
  4. Ted Carron

    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.

    Reply
  5. David Andora

    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.

    Reply
      • 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?

      • Nelson Lee Miller (aka The Divi Teacher)

        Glad to hear you got it solved! I’m not sure about anything last minute, might want to check the Facebook groups or Upwork for that.

      • Peter

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

      • Nelson Lee Miller (aka The Divi Teacher)

        Peter, who is the “he” you are referring to who doesn’t solve anything? Did you ask a question before that is “still” not answered?

  6. Philipp

    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! 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Philipp,
      You’re welcome, glad you like the tutorials! I assume this comment was the prequel to your second one. Not sure I am getting the context of it though. Let me know if you need help with it!

      Reply
  7. Philipp

    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;
       }

    }

    Reply
    • Andrés

      Thanks my friend! I had been looking all day… At this point, divi or wordpress could put a box where you can directly write the resolution in which we want the hamburger menu to become. But it is appreciated!!

      Reply
  8. Rob

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Rob,
      It is very difficult to do what you are asking, but we are planning to add that to our Divi Responsive Helper plugin. Like, hacking the entire Divi is a huge undertaking. This tutorial is to solve the issue with the menu, and I personally do not believe it needs to synchronize with other items, I feel like visitors not notice 🙂

      Reply
  9. Dave

    Worked like a charm. Thanks!

    Reply
  10. Casey Andrews

    I’ve tried the code in the main text, and the suggested code from commenters. I have a header designed in the Theme Builder. The breakpoint doesn’t move.

    Reply
    • Hemant Gaba

      Hi Casey,

      Could you please share the URL of the page so that I could have a look?

      Reply
  11. Bruce Peña

    Hey guys I want my entire site to change to mobile view earlier for phones with slightly larger DPI. so for example on my pixel phone I have the option to increase the dpi so that I can fit more on the screen however when i view my site on my phone it gives me a very crammed tablet view because my dpi is 484 and divi switches to mobile at 480. I would like to make it so that my mobile view switches from 485 and below.

    Reply
    • Hemant Gaba

      Hey Bruce,

      Could you please share the URL of the website for me to investigate further on this?

      Reply
    • Hemant Gaba

      Hey Jay,

      I am not able to spot this issue on my end.

      Reply
  12. Florencia

    Hi there! The snippet worked a charm! I was trying to figure it out on my own but was targeting the wrong classes so thanks for that! The only tiny thing that’s still bugging me is that, at the new break point for mobile menu, the hamburger icon appears closer to the top of the page and then it changes to its default position when I keep shrinking the size of the screen. I tried giving targeting .mobile_menu_bar and giving it some top margin but that applies to both positions of the hamburger icon. Is there a way to adjust this??

    Reply
    • Hemant Gaba

      Hey Florencia,

      I have checked the website and I am not able to replicate the issue you stated on my end.

      Reply
  13. Florencia

    Hi again! I’ve just added the snippet and everything works just fine on my pages but nothing changes on my custom posts. I’m racking my brains trying to figure out why. I’m using the same global header for them as well.

    Reply
  14. Ben

    Love the stuff you post here, but in all honesty, I can’t spend more than a minute or two on the site. The scroll snapping (or what appears to be scroll snapping) is overbearing.

    Reply
  15. Jill Apolinario

    Just copied your code and can’t get it working. I placed the code in Divi>ThemeOptions>Custom CSS. I’ll add to child theme once I get it working.

    I’ve changed the breakpoint from 1149px to a variety of other sizes with no results. URL is: tecriders.org.

    Thanks for your help and I’m very happy to have found your website today. Already purchased the Form Helper!

    Reply
  16. Keith Homel

    In order to keep the hamburger button in alignment with the logo in the header (theme builder/menu module), I always need to add this:

    .et_pb_menu .et_mobile_nav_menu {
    float: none;
    margin: 0 6px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    }

    Otherwise the hamburger button jumps to the top of the div instead of staying vertically centered.

    Reply
  17. Melissa

    Hi Nelson!
    I refer to this code quite often! Thank you – however the first chunk of code is missing the “;” after “block”.
    Some of your readers may not notice and if they don’t add it, the code does not work.
    Though I would share!
    Thanks!

    Reply
    • Hemant Gaba

      Hi Melissa!

      We have updated the code. Thank you for bringing this to our attention. We really appreciate it.

      Reply
  18. Nevin Stoltz

    So I tried this code, and while it does work, I am having an issue that hopefully someone can help me with!

    I am using theme builder to make my menu, and it is a center in-line menu with the logo in the middle. When I get down to the tablet size, the logo totally disappears and there is only the hamburger. When I get down to mobile size, it reappears.

    It doesn’t disappear when the code is not added, only when trying to use this fix.

    It’s not a live site so sadly I do not have a link I can share or anything.

    Thank you

    Reply
    • Hemant Gaba

      Hi Nevin!

      Can you check if the responsive content option (little mobile icon on hover) is enabled while adding the logo image in the tablet view? If the image is not present in the tablet view, then add it again.

      Reply
  19. Bea Nicholson

    This is a great bit of code, thanks so much. I still have a slight issue with respect to the desktop menu being “sticky”.

    I want the menu on the desktop to be “sticky” but when the menu switches to Mobile, the mobile menu sticks to the top between my setting of 1250px and the Divi Standard breakpoint of 980px, and the mobile menu will not scroll.

    I’m working locally, so I cannot share the URL.

    This is the code that’s working for me:

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

    Reply
    • Hemant Gaba

      Hi Bea!

      Please add a custom class in the section like custom-menusection of the menu and then use the following code:

      @media only screen and (max-width: 1250px) {
      .et_pb_menu .et_pb_menu__menu {
      display: none;
      }
      .et_mobile_nav_menu {
      display: block;
      }
      .custom-menusection{
      position: relative !important;}
      }

      Hope it helps!

      Reply
  20. Xavier

    ok It working good ! but …
    my background is transparent ? I don’t understand why. is possible to change it ?

    Thx 🙏

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Xavier,
      I don’t understand your question, as it does not seem related to our tutorial. You can change the background color of the Menu module from the module settings.

      Reply
  21. David

    Hi,

    Firstly, huge fan.
    You are my go-to trusted site for adjusting Divi with CSS.

    The first code for adjusting mobile breaking points works perfectly.

    However, the second piece of code for removing bullets on iPad PRo hamburger menu (which by the way is one of my most frustrating issues with Divi) isn’t working for me.

    And yes – I am using the Menu module as a global harder in the divi builder 😉

    Any thoughts?

    Reply
    • Hemant Gaba

      Hi David!

      I have updated the code now. Please use the latest one from the above and see if it helps.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart