How to Add a Vertical Menu in the Divi Menu Module

Creating a vertical menu in Divi can be a great way to improve the navigation and aesthetics of your website. Whether you’re working on a side navigation menu or simply prefer a vertical layout, Divi makes it relatively easy to achieve this with a few steps and some custom CSS. Here’s a comprehensive guide on how to add a vertical menu using the Divi Menu Module.

Step-by-Step Guide

Step 1: Add a Section and a Row

1. Navigate to the page editor where you want to add the vertical menu.
2. Add a new standard section.
3. Inside this section, add a row with one column.

Step 2: Add the Menu Module

1. Click the “+” icon inside the column to add a module.
2. Select “Menu” from the list of modules.

Step 3: Configure the Menu Module

1. In the menu module settings, choose the menu you want to display (e.g., the main menu).

Step 4: Add a Custom CSS Class to the Menu Module

1. Go to the “Advanced” tab in the menu module settings.
2. In the “CSS Class” field, enter a custom class, such as vertical-menu.

Step 5: Add Custom CSS Code

1. Navigate to “Appearance” > “Customize” in the WordPress admin panel.
2. Select “Additional CSS.”
3. Paste the following CSS code:

/* Vertical Menu */
.vertical-menu ul {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.vertical-menu ul li {
width: 100%;
}

.vertical-menu ul li a {
display: block;
width: 100%;
padding: 10px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.vertical-menu ul li a:hover {
background-color: #f5f5f5;
}

Verification and Customization

Verify

1. After adding the custom CSS, check if the menu is displayed vertically as desired.
2. Ensure it looks correct on both desktop and mobile devices.

Customize

1. You can further customize the CSS to adapt the menu style to your needs.
2. Modify the padding, margins, colors, and other CSS properties to achieve the desired look.

Example of Additional Customization

If you want to enhance the appearance of the menu, you can add the following CSS:

/* Additional styles for the vertical menu */
.vertical-menu ul li a {
color: #333;
font-size: 16px;
font-weight: 600;
}

.vertical-menu ul li a:hover {
color: #0073e6;
background-color: #e9ecef;
}

.vertical-menu ul li.active a {
background-color: #0073e6;
color: #fff;
}

Final Steps

Save and Publish

1. After verifying and customizing the CSS, save the changes and publish the menu.

Final Verification

1. Ensure all changes are correctly applied and that the menu is displayed as desired on all screen sizes.

Troubleshooting

If the menu still doesn’t behave as expected, check for any conflicts with other CSS styles in your theme or plugins. Also, ensure the custom CSS class is correctly applied to the menu module.

By following these steps, you can easily transform your horizontal menu into a stylish vertical menu, enhancing the navigation and user experience on your website. Happy designing!