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
/* 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;
}
}
Related Post: Adding CSS to the Divi Theme
Want get more out of Divi?

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