Have you ever wondered why sometimes your menu overlaps into two rows and your logo doubles in size? Like this….
That’s because the logo’s size is determined by a percentage of the rows height. So when the screen is not wide enough to fit the entire menu, it drops into a second line doubling the height of the row.
Over the years I have come up with a number of mobile query breaks that reduce the font size, reduce the right padding, and increase the width of the container at various breakpoints. I still use that method all the time.
But today I wanted to share with you a quick little CSS snippet you can use to initiate the mobile menu a little sooner than usual so that you dont have to come up with 2-4 additional mobile queries.
The Magic of CSS
Now lets start to dazzle things up a bit with some CSS.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
/* initiate mobile menu sooner than 980px by GQ */
@media only screen and (min-width : 981px) and (max-width : 1200px) {
#et_mobile_nav_menu {display:block; margin-bottom:10px; margin-top:5px }
#top-menu-nav { display:none; }}
Notes
By default, the Divi Mobile Menu converts to an icon at 980px. In this snippet I have it set to change into an icon at 1200px. Just adjust the max-width to whatever screen width is ideal for your menu length.
Depending on what settings you have adjusted in the customizer, you will also need to adjust the top and bottom margin to get it exactly where you want.
Have fun!
Well that’s all for now. I hope you find this article useful.
If you put eg. 5 menu items and inside at least 5 sub menu items. And when you open on desktop or tablets at 1100px for example, you will not able to see any menu after 2nd main menu item. You cant scroll menu.
So this code need to be added
@media only screen and (min-width : 981px) and (max-width : 1463px) {
#et_mobile_nav_menu {display:block; margin-bottom:10px; margin-top:5px }
#top-menu-nav { display:none; }
.et_mobile_menu {overflow-y:scroll!important;max-height:80vh!important;-overflow-scrolling:touch!important;-webkit-overflow-scrolling:touch!important;}
}
Great! Thanks for sharing!
Good bless you. I was looking for this since 2 months ago. Thank you, thank you, thank you!
Wow! I have been trying to figure this out for a while! Thanks Geno so much for posting this, and thanks slavisa037 for the additional code!
Hi, I used the centered nav menu for this site https://bullseyetotalmedia.us/huntingtondermatology/ and now I’m trying to initiate the mobile menu at 1256px because of adding menu items by the client. When I do, the menu from 1256px – 981px is not my typical mobile menu. Do you have any insights on what I’m doing wrong? Thanks!
Looks like you got this working. The site looks great.
Hi Geno, how can I initiate it for bigger screens with a centered logo layout?
The code above works, but the logo does not display.
Thanks!
I will have to add this to the list and get back to you on this one.
Can you send me a link? I could probably figure out if I can see what you have.
I’d love to see a snippet for this as well! Currently have the same problem as Sue, but I can’t figure out why it’s not displaying.
Can you send me a link? I could probably figure out if I can see what you have.