๐ŸŽ Get Up To 70% Off During Divi Summer Sale! Get Divi

How to Create a Vertical Menu with Divi Menu Module

Blog, Divi Tutorial | 1 comment

Do you want to create a vertical menu in the Divi theme? In this article you will find step by step instructions on how to use Divi Menu Module to add a Vertical Menu.

There are no options to create a vertical menu in Divi by default. However we can use CSS code to make the menu module show menu items in a vertical format.

Just to clarify the code will work for menus with no sub menus.

1. Add CSS Class for Vertical Menu in Menu Module

The first step is to add a custom CSS Class to the menu module so we can target is specifically. And so that the code does not affect any other menus or content on your website.

Open the Menu Module Settings > Advanced > CSS ID & Classes > CSS Class and then add the class lwp-vertical-menu.

Please check the screenshot below to understand where to add the CSS Class.

Vertical Menu CSS Class

2. Add CSS Code for Vertical Menu in Theme Options

Next you have to add the CSS Code to style the menu module to show the menu items in a vertical format.

Go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the following CSS code.

.lwp-vertical-menu nav ul li {
    width: 100%;
    display: block;
}

Please check the screenshot below if you are having trouble finding the location to add the code.

Divi Theme Options Custom CSS

The menu module will have one item on each line after you have added the CSS Class to the menu module and added the CSS code in the Theme Options.

Below is a preview of how the menu module will look after adding the code.

Divi Vertical Menu using menu module

This will still change the menu module to hamburger menu on tablets and phones. If you want to stop the menu module from turning into a hamburger menu on small screens then you can follow the steps from the article Disable Mobile Menu (Hamburger Menu) in Menu Module.

Leave a comment below if you have any questions. Donโ€™t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

Here are some more Divi tutorials that you can check next.

You can find a complete list of all the help articles related to Divi on the Divi Tutorials page.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

1 Comment

  1. teeray

    thanks, super quick and simple. ๐Ÿ™‚

    Reply

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!