Alamea - A Premium Child Theme for Divi

Have you ever been annoyed with the Divi menu carrying over into a second line on smaller desktop & laptop screens? Well so do I, and that is why I have a little CSS I keep handy for just about every website I build with Divi.

 

non-responsive divi menu

 

The reason it does this is 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.

Awhile back I provided a way to initiate Divi’s mobile menu button on bigger screens. In this snippet, I will show you how to reduce the font size, reduce the right padding, and increase the width of the container at various breakpoints.

 

Adding The Custom 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>Custom CSS (which is located at the bottom of the first tab in Theme Options).

If you need a free basic child theme, check out my post: 5 Easy Steps To Create a Child Theme.

Add this CSS.

	/* shrink menu on smaller viewports by geno quiroz */

		@media only screen and (max-width : 1200px) {
			.container.clearfix.et_menu_container, #top-header .container.clearfix {
				max-width: 100%!important;
				width: 95%!important;}}

		@media only screen and (max-width : 1100px) {
			#top-menu li {
				padding-right: 13px!important;}
			#top-menu li a {
				font-size: 13px!important;}}

 

 

Making Adjustments

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

 

This snippet consists of two screen size breakpoints. The first one applies to a screen width that is smaller than 1200px and the second one applies to a screen width smaller than 1100px. As an FYI, the menu changes to a mobile menu at 980px wide by default. You can adjust the breakpoints here:

 

On the first breakpoint, we are telling Divi to change the max-width and width of the menu container. By default the max-width is 1080px and the width is 80%. On smaller screens, that is valuable real estate. So I open that up a bit. To adjust the width, you can do so here:

 

For some, that first breakpoint may be all that you need. But in most cases, you might need to add one more. So for the second breakpoint, what I do is shrink the font size a little and remove some of each menu item’s right padding. To adjust the font size and padding for the second breakpoint, you can do so here:

 

And that’s it.

If you used this on one of your projects, let me know in the comments below.

Have fun!

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.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest