Have you ever wondered why sometimes your menu overlaps into two rows and your logo doubles in size? Like this….

001 - Initiate Mobile Menu Button Sooner

 

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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!