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.

One of the most common requests I see in the Elegant Themes User Community Facebook group is to have more design options for the sub-menus.

This is the first in a new series for different sub-menu options.

In this tutorial I will show you how to create and tweak Compact Divi Sub-menu as shown on the demo below, with just a little CSS.

View The Live Demo

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)

1. Add this CSS.

/*------------------------------------------------*/
/*-----------[GQ - COMPACT SUB-MENU]--------------*/
/*------------------------------------------------*/

/* drop down menu - level 1 */
	.nav li ul {
		width: 180px;
		padding: 0px;}
	.nav li li {
		line-height: 14px;}
	#top-menu li li {
		padding: 0 0px;}
	#top-menu li li a {
		font-size: 13px;
		width: 180px;
		padding: 5px 10px;
		font-weight: 300;}

/* drop down menu - level 2 */
	.nav li li ul {
		top: -3px;
		left: 180px;}

/* change drop down icon in submenus only */
	#top-menu li .menu-item-has-children > a:first-child:after {
		top: 6px;
		right: 5px;
		font-size: 14px;
		font-weight: 400;
		content: "5";}

 

 

Notes

If you want to change the width of the sub-menu, just modify this part of the css. All three of these should be the same width whichever width you choose.

compact divi sub-menus

 

If you want to change the font-size, line-height and font-weight, just modify these parts of the css.

compact divi sub-menu custom css

 

This part is the drop-down icon in the sub-menus. It changes it from a downward carrot to a right carrot which is the actual direction of the second level sub-menu. You can adjust font-size, font-weight and position here.

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

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 Services | John 3:16

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

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest