Vertical Menu For Footers & Sidebars
There are at least two good use cases for vertical menus, and there is no way to create one in Divi by default. But don’t worry, it’s very easy to modify the Divi Menu module and make the items stack vertically. So in this tutorial I will show you how to make a vertical stacked menu with the Divi Menu module and provide some great styling bonuses.
▶️ Please watch the video above to get all the exciting details! 👆
Add A Custom CSS Class To The Menu
The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to Advanced tab to the CSS IDs & Classes toggle and place the class “pa-vertical-menu” in the CSS Class input field.
Add The CSS Snippet To Your Site
Now for the fun part, adding the CSS snippet. This is easy and all you have to do is copy it below and add it to your site.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*remove default 11px padding on each side of list items*/
.pa-vertical-menu .et-menu > li {
padding-left: 0px;
padding-right: 0px;
}
/*make the menu items fullwidth and add space between them*/
.pa-vertical-menu .et_pb_menu__menu nav ul li {
display: block;
width: 100%;
margin: 10px 0;
}
/*style the menu items*/
.pa-vertical-menu .et_pb_menu__menu nav ul li a {
padding: 20px!important;
background: #f0f3f6;
border-radius: 6px;
border: 2px solid #f0f3f6;
}
/*style the menu items on hover*/
.pa-vertical-menu .et_pb_menu__menu nav ul li a:hover {
opacity: 1!important;
color: #ffffff;
background: #00d263;
border-color: #00d263;
}
/*style the active menu item*/
.pa-vertical-menu .et_pb_menu__menu nav ul li.current-menu-item a {
opacity: 1!important;
color: #ffffff;
background: #00d263;
border-color: #00d263;
}
/*style the arrow icon if there are submenus*/
.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children>a:first-child:after {
content: "5" !important;
/*change arrow icon for submenu*/
padding: 20px;
font-size: 24px;
}
/*style the arrow icon if there are submenus to submenus*/
.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children .menu-item-has-children>a:first-child:after {
padding: 8px !important;
right: 0px !important;
}
/*make the submenu align directly to the right of the menu item instead of below*/
.pa-vertical-menu .et_pb_menu__menu nav ul li ul {
top: 0!important;
}
/*align submenu to the right of menu link*/
.pa-vertical-menu .et_pb_menu__menu nav li ul {
left: 100%!important;
}
/*add an icon to the left of each menu item link*/
.pa-vertical-menu ul li a:before {
font-family: 'ETMODULES';
content: '\24';
text-align: center;
vertical-align: middle;
margin-right: 8px;
margin-left: 0px;
color: #00d263;
font-size: 1.3em;
transition: all .75s ease;
}
/*style the menu items icon*/
.pa-vertical-menu ul li a:hover:before {
margin-left: 7px;
color: white!important;
transition: all .75s ease;
}
/*style the active menu item icon*/
.pa-vertical-menu ul li.current-menu-item a:before {
margin-left: 7px;
color: #ffffff!important;
}
@media (max-width: 980px) {
/*open the mobile menu up and use on all devices*/
.et-db #et-boc .et-l .pa-vertical-menu .et_pb_menu__menu {
display: flex;
}
/*hide the hamburger icon*/
.et-db #et-boc .et-l .pa-vertical-menu .et_mobile_nav_menu {
display: none;
}
}Code Summary Explanation
You can see each snippet of the code has a comment with a brief explaination of what it does. This should cover it pretty well, but here is a summary of what is happening. Keep in mind almost all of this is optional, and it is intended to be customized. Use this as a base and make it your own!
The first part of the code is removing some default padding on the left and right of the menu items.
Next we are making each menu item a block element set to 100% fullwidth.
Next we are adding some optional styling to the link color, background color, padding, and a border, and then adjusting that styling for when you hover over it.
We are using the same styling for the active menu item as we are using for hover. This also is optional and can be customized however you want.
If you use a submenu, meaning if you have child items under any menu item, then there are a few adjustments that we are making to those. The arrows that indicate a submenu need adjusted, and the position of the submenu is now aligned directly to the right of the parent menu item.
Next we are adding some arrow icons to the left of the menu items. These of course are optional, but they look pretty nice. They are also styled to move over to the right a little and change color on hover.
The last part of the code has a media query, and this code is used to open up the mobile hamburger menu. In other words, this part is just like our other tutorial here. This is optional, but we added this so that the menu would be stacked vertically the same on any device.
HI Nelson,
Totally enjoy your tidbits of help and insight. I find you to be one of my key go-to’s when looking how to do something. My challenge today is I want a vertical menu but showcase an image on hover to the right side of the menu to be used like a mega menu. I see icons on the left and you seem to talk around images but I am not sure how to get the images to the right, and adjust their sizing. Can you elaborate for me please. Much appreciated. Keep doing what you are doing. Cheers.
Hi AI!
For images, you can use the Blurb module instead of Menu module. Then align the image to left in style tab > Images. After that, add the following code to with custom class in module.
.custom-blurb .et_pb_blurb_content
display: flex !important;
flex-direction: row-reverse;
}
Hope it helps!