If you are building Divi websites and using the amazing Theme Builder, then I’m sure you have encountered quite a lot of problems with it. One of those is the responsive breakpoint where the Divi menu switches from the desktop menu to a hamburger menu. This can be at just the wrong size, and you may want to tweak it a little or even change it a lot, depending on the size of your menu.
We are in the process of creating a lot of tutorials and freebies with the Divi Menu module, so be sure to subscribe here on the blog and on our growing Divi YouTube channel! We’ve unofficially started a menu series, and there are quite a few more to go!
By the way, our last Divi Menu tutorial focused specifically on adding a mobile menu on desktop, a desktop menu on mobile, and one of each side by side on desktop. That tutorial is very popular, and you can find it here:Â How To Show A Divi Hamburger Menu on Desktop (and Vise-Versa)
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!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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;
}
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!
I hope you have enjoyed learning How To Change The Divi Menu Module Responsive Breakpoint. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
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 :)
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.
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 🙂
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…
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…
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.
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.
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.
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?
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!
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.
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 🙂
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.
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.
Thanks for the tutorial. I’m working with the menu module at this url: https://tr.iamthewebdude.net/home-page-revision-3/ the code works as expected, but when I click on the hamburger menu I have bullet points out to the left. How can I make those go away?
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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
}
}
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!
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 🙂
and me … that really helped
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
Could you please tell us that what you are trying to achieve and also share the website URL for more clarity and further investigation?
Have to add some other info. Needed to set my standard primary menu to full width
this code worked for me;
@media (max-width:1024px) {#et_mobile_nav_menu {display:block;}#top-menu {display:none;}}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
Sounds good, Clay. I never use anything “Fullwidth” as they are so outdated and lack features, so I never cover those in my tutorials.
I phrased that badly Nelson. It’s just a custom header section that happens to be full-width.
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.
Hi Ben,
Yes you can do this easily, this is something I do a lot. Check out my other tutorial about that here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-show-a-divi-hamburger-menu-on-desktop/
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.
Hi Ted,
I’m willing to bet you are using the default Divi header menu, not the Menu module? Am I right? 😉
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.
Hi David, I spent a few minutes looking and I really don’t know why it isn’t working for you.
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?
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.
He does not solve anything. Still the same question: How to change the breakpoint below 980px?
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?
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
Hi Arvie,
That would be a little harder because you would need to target a lot of default Divi code and override it with CSS breakpoints. You can learn more about media queries here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
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! 🙂
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!
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;
}
}
Hi Philipp, I’m not sure what you mean or what you are asking. Try again?
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.
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 🙂
Worked like a charm. Thanks!
That’s great Dave!
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.
Hi Casey,
Could you please share the URL of the page so that I could have a look?
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.
Hey Bruce,
Could you please share the URL of the website for me to investigate further on this?
Thanks for the tutorial. I’m working with the menu module at this url: https://tr.iamthewebdude.net/home-page-revision-3/ the code works as expected, but when I click on the hamburger menu I have bullet points out to the left. How can I make those go away?
Hey Jay,
I am not able to spot this issue on my end.