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;
}
}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