The mobile menu of DIVI is a wonderful thing, but in best case the regular menu stays visible as long as possible, meaning that only in smaller resolutions, where the text would collide with the logo or get into two lines, we really need to reduce to the mobile version. Since every menu has a different width according to its entries, we can optimize the responsiveness by moving its breakpoint to the point it starts to collide or break. We can find out this point easiest with the developer tool of Chrome, which tells us the browser width whenever we shrink the browser window. Just use the following lines in your child-theme or custom CSS area of DIVI theme options and replace the 981px with your optimal breakpoint:
|
1 2 3 4 5 6 |
/* Setting the breakpoint of the mobile menu */ @media only screen and ( max-width: 981px ) { #top-menu-nav, #top-menu {display: none;} #et_top_search {display: none;} #et_mobile_nav_menu {display: block;} } |
You might want to also make the header not fixed at this point too. Otherwise, if you menu is long you won’t see the bottom of it on the screen.
.et_fixed_nav #main-header, .et_fixed_nav #top-header{
position: absolute;
}
this is what i had to figure out manually too. this is the right answer.
Thanks, it worked perfect! I just added something to my Divi menu and then noticed it was squashed on the iPad landscape view and was looking for a quick fix.
Thanks so much !!!
Super helpful! Thanks
Don’t forget to copy (and adjust) this line as well, otherwise the positioning off the toggle icon will be a little off. And it will jump when resized …
@media (max-width: 981px ) {
.et_header_style_left #et-top-navigation, .et_header_style_left .et-fixed-header #et-top-navigation {
display: block;
padding-top: 24px !important;
}
}
Helped me out, thanks!
You may want to consider this instead:
/*Force Mobile Mode for iPads in landscape */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {display: none;}
#et_mobile_nav_menu {display: block;}
}
This is perfect. Thank you!
Thanks, this saved me searching around for a fix
you sir are a star!! thank you.
Thank you for this.
I found I had to do this to undo the old settings before this would work.
Thanks – worked a treat!
This still works a treat in 2019, thanks Sofian. :-)
Hi,
Many thank’s to share these lines, just wok fine !
Regards,
excellent work brother:) you rock::))
Good job thanks!!!
Thank you so much :) it works!
Thanks a lot, real timesaver in searching for a solution!
Thank you so much for this precious code to be inserted in the css file to modify the breakpoint of the DIVI theme for displaying the hamburger menu.
This is great, Sofian. I am also trying to make the breakpoints for Divi change, especially between the desktop and tablet. Since iPad has such high resolution, divi really does not work set at 980. I would like to override the Divi settings without having to go into the editor and make substantial changes that may or may not work (According to Divi Support). Do you have a solution so I can make the break point, similar to the code above, that switches the page from i.e two column to one at, let’s say 1200px instead of 980? Thanks again for the great blog.
Hey Chris, sorry I haven’t been on my blog for a long time. Did you meanwhile find a solution?