How to add a vertical Divi Menu Module

Do you want to create a vertical menu on your Divi website?

There is no default option to create a vertical menu in Divi but we can use custom CSS code to make the Divi Menu module display its menu items vertically.

This would be useful if you want to manage your menu via the WordPress menu dashboard and would work well for adding menu items to your Divi sidebar or Divi footer.

Steps to make the Divi Menu Module display vertically

1. Add a Divi Menu module where you would like it to display on your page and select the WordPress menu to use. This can be on any page or post, but also anywhere in your Theme Builders templates such as in the footer or sidebar.
2. Go to your Menu Module Advanced settings and in the CSS ID & Classes section add a custom CSS class of vertical-menu
   
   
3. Add the following CSS to Divi. This can be added in a number of places but the most popular place would be in your Theme Options Custom CSS box or into a Divi child theme CSS file. To add to Teme Options navigate to your WordPress dashboard > Divi > Theme Options > Custom CSS and then add the following CSS code.

   /*Make the menu module display vertically*/
   .vertical-menu nav ul li {
   width: 100%;
   display: block;
   }

This will stack your Divi Menu module link items vertically as shown in the image below.

These are the basic steps for making your menu module display vertically but depending on your requirements it may need further customization.

if you have dropdown items, want to stop the menu from reverting to the hamburger menu on mobile and tablet, or want to further style the menu you can do so with the following optional customizations.

How to stop the vertical menu using the hamburger menu

By default, all Divi menus will change to a hamburger-style menu on tablets and mobile screens as defined by the Divi breakpoints.

By adding some CSS media queries we can tell Divi to keep the vertical menu on every screen size and not use the hamburger menu.

To force the vertical many to display on desktop, tablet, and mobile devices you can add the following CSS. As before this can be added in various places but most likely will be added to your Divi Theme Options or child theme CSS file.

Add the following CSS code;

/*show desktop menu*/
@media (max-width: 980px) {
.vertical-menu .et_pb_menu__menu {
display: flex!important;
}
.vertical-menu .et_mobile_nav_menu {
display: none!important;
}
}

How to style the vertical menu using CSS

You now have a vertical Divi Menu module with a CSS class (vertical-menu) that will display vertically on desktop, tablet, and mobile.

You can further style the elements of the many using the built-in Divi Menu module settings or by adding some extra CSS such as listed below.

For some basic menu styling you can add the following CSS code;

/* General styling the the menu item links*/
.vertical-menu .et_pb_menu__menu nav ul li a {
padding: 10px!important;
background: #fefefef;
border: 1px solid #f3f3f3;}
/*General styling the the menu item links on hover*/
.vertical-menu .et_pb_menu__menu nav ul li a:hover {
color: #ffffff;
background: #333333;}