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.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest