Inline Vertical Menu Dropdown Sub-Menus

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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.