Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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



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.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest