Inline Vertical Menu Dropdown Sub-Menus

This post may contain referral links which may earn a commission for this site

Inline Vertical Menu Dropdown Sub-Menus

How to place the vertical menu submenus below the menu items

The Divi Theme offers a vertical menu option for the main header. When selected, any dropdown submenus will be displayed to the side of the vertical menu. If you'd like to change this behavior and have the dropdown submenus appear below the main menu items, i.e. inline with the main menu itself, here's how:

Making the Submenus inline using CSS

The following CSS code should move the submenu items inline with the main vertical menu, while preserving any formatting applied via the customizer:

/* Place vertical menu sub-menus inline with the main menu items */

@media only screen and (min-width: 981px) {

	.et_vertical_nav #main-header #top-menu ul.sub-menu {
		left: 0px;
		top: 0px;
		width: 161px; /* = 145px menu width + 16px "down" icon overlap */
	}
	.et_vertical_nav #main-header #top-menu li ul.sub-menu li {
		padding: 0 10px; 
	}
	.et_vertical_nav #main-header #top-menu li ul.sub-menu li a { 
		width: 100%; 
		padding: 8px 10px;
	}
	.et_vertical_nav #main-header #top-menu li:hover ul.sub-menu {
		margin-bottom: 20px;
		padding: 10px 0px;
		position: relative;
	}
}

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *