Perfect Divi Vertical Menus Without Hassle
If you’ve ever searched in vain for a vertical menu option in Divi, the good news is – you don’t need one! The truth is that there’s no such option in Divi. All you need to do is display your existing WordPress menu vertically.
We’re going to show you two different options to achieve this nifty feat – using the Divi Theme Builder to create one from scratch, or using Custom CSS to make your existing menu vertical. Stick to these methods and you’ll be able to edit your global menu from a single source, across devices.
We’ll also introduce a couple of extensions that can manage your menus across devices, while adding heaps more design options to your palette.
Key takeaways
- A vertical menu in Divi isn’t a separate feature – it’s your existing WordPress menu, styled differently.
- The real challenge is managing display orientation and responsiveness, not creating duplicate menus.
- CSS can handle quick vertical stacking, while Theme Builder offers complete layout control for sidebars or fixed navigation.
- Mobile layouts demand dedicated designs, such as forcing a desktop vertical menu onto small screens creates usability problems.
- Advanced tools and tutorials from Divi Life let you enhance either method with animations, collapsible submenus, and consistent single‑source menu management.
When vertical menus beat horizontal navigation
Horizontal headers work until your menu starts looking like a train with too many carriages. Once you pass 10 items, things get cramped, and vertical menus come into their own.
A vertical layout gives each item room to breathe while keeping your navigation tidy. They’re perfect for dashboard‑style interfaces where menus need to stay visible while content scrolls.
They’re a natural fit for client portals, admin areas, analytics panels, documentation sites, knowledge bases, and wikis, where readers expect a persistent list of sections to click through.
Restaurants, service providers, and product catalogs have plenty of use for them, too. Hierarchical menus make it easy to scan categories without hovering over a horizontal bar. Users spot what they need without extra clicks.
For mobile, the best equivalent is a slide‑in menu. These keep the clarity of a vertical layout while embracing the touch‑friendly design that mobile users expect.
Your WordPress menu already works (just display it vertically)
Every Divi menu pulls directly from your WordPress menu. To manage your menu, head to Appearance > Menus in your WordPress dashboard.
Assign pages to your menu, give it a name and display location, then click Save Menu.
When it comes to designing the appearance and functionality of your menu, Divi’s Menu Module connects to any menu you’ve created. You’ll have full control over orientation and layout, but it’ll always pull from the one menu source.
Let’s look at two different ways to achieve vertical navigation.
Method 1: Build your vertical navigation with Divi Theme Builder
The Divi Theme Builder lets you create a vertical navigation from scratch, with total control over appearance. Here’s a step-by-step guide:
1. Create a Global Header: Navigate to Divi > Theme Builder in your WordPress dashboard. Select Add Global Header. Choose Build Global Header and start with a blank layout.
2. Set section width and padding: In your Section settings, set the width to 250px-300px for a balanced look, as this fits most sidebars. Add generous left/right padding to prevent squished menu items.
3. Fix position: Go to Advanced > Position. Set it as Fixed. Under Offset Origin, select the left or the right for sidebar positioning. This anchors your menu so it stays visible while users scroll.
4. Add and configure a column: Click to add a column – usually a single column works best. Set custom padding and sizing here, and keep it roomy.
5. Insert menu module: Drop in the Menu Module. Choose your WordPress menu. Adjust design settings like font size if you’re feeling fancy.
6. Add CSS class and code: In the Menu Module’s Advanced tab, add a CSS class (e.g., vertical-menu). Insert the code via Divi > Theme Options > Custom CSS, and paste the following:
/*
.vertical-menu {
display: flex;
flex-direction: column;
}
.vertical-menu .et_pb_menu__menu li {
margin-bottom: 12px; /* Adjust spacing as needed */
}
*/
Et voilà – just like magic, your menu will stack vertically, one item per line!
7. Mobile adjustment: if you don’t want a giant menu hogging the screen on phones or tablets, go to Section, Row, or Module settings, find Visibility, and hide your vertical menu on smaller devices. Build a cleaner-looking mobile menu instead.
Method 2: Transform any menu to vertical with custom CSS
If you want vertical nav without changing your Divi header, use custom CSS – it’s quick, painless, and works for any Menu Module. As before, remember to set the position of your menu as Fixed via Divi Menu Module – Advanced > Position, then choose specific positioning via Offset Origin.
- Step 1: Keep your header as-is. No need to rebuild layouts.
- Step 2: Go to your Menu Module. In Advanced > CSS ID & Classes, add the class vertical-menu.
- Step 3: Skate over to Divi > Theme Options > Custom CSS and paste this:
/*
.vertical-menu {
display: flex;
flex-direction: column;
}
.vertical-menu li {
margin-bottom: 12px; /* Adjust spacing for your style */
}
/* Optional: Make the menu sticky on desktop */
@media (min-width: 981px) {
.vertical-menu {
position: sticky;
top: 0;
left: 0; /* or right: 0; for right side */
}
}
*/
This CSS only affects modules using the vertical-menu class – your other menus won’t change. Now you can scroll, and your menu will stay put regardless.
The core differences between the Divi Theme Builder and Custom CSS approach
| Aspect | Theme Builder Approach | Custom CSS Approach |
| Benefits |
|
|
| Limitations |
|
|
| When to Use |
|
|
Make your vertical menu submenus collapsible
Some menus need to go deep-deep-down. Huge hierarchies make collapsible submenus the ideal solution, sparing users from a never-ending scroll. Accordion-style menus keep navigation tidy and brain-friendly, especially when space runs out.
This upgrade works whether you built your vertical menu with the Theme Builder or custom CSS. You can add smooth expand/collapse animations with a mix of CSS and JavaScript (jQuery):
1. Add a CSS class to your Menu Module: Open your Menu Module settings. In Advanced > CSS ID & Classes, add a class like collapsible-menu.
2. Paste the jQuery snippet: Go to Divi > Theme Options > Integration > Add code to the <head> of your blog. Paste this snippet inside <script> tags:
/*
<script>
jQuery(function($){
$('.collapsible-menu .menu-item-has-children > a').after('<span class="submenu-toggle"></span>');
$('.collapsible-menu .submenu-toggle').on('click', function(e){
e.preventDefault();
$(this).toggleClass('active');
$(this).siblings('.sub-menu').slideToggle(200);
});
});
</script>
*/
3. Add Collapse Animation and Arrow CSS: In Divi > Theme Options > Custom CSS, paste:
/*
.collapsible-menu .sub-menu { display: none; }
.collapsible-menu .submenu-toggle {
cursor: pointer;
display: inline-block;
margin-left: 8px;
transition: transform 0.2s;
}
.collapsible-menu .submenu-toggle:before {
content: "\25BC";
display: inline-block;
font-size: 0.9em;
}
.collapsible-menu .submenu-toggle.active:before {
content: "\25B2";
}
*/Now, when your menu items act as a parent, they’ll come with a dropdown arrow. Select this, and your submenu items will be revealed.
Collapsible menus are especially essential on phones. Tidy navigation means users won’t get hopelessly lost, no matter how deep your menu burrows.
Why does my Divi vertical menu break on mobile?
Divi vertical menus love desktop space but tend to fall apart on mobile screens. Fixed positioning is a big problem as it forces the sidebar to anchor itself, shoving your carefully crafted links out of view when screens shrink.
If your menu height is taller than the viewport, expect items to get cut off, or force visitors into endless scrolling. Fixed widths don’t scale for mobile, often creating an annoying sideways-scroll nobody wants. Submenus and dropdowns are notorious for popping outside the phone’s visible screen, leaving users lost and frustrated.
“The solution is found by not forcing a desktop vertical menu to fit mobile. For a better mobile experience, experiment with Divi’s built-in mobile menu options, or consider a dedicated mobile menu system like Divi Life’s Mobile Menu plugin. Your mobile visitors get navigation designed for small screens, complete with slide-in layouts and proper submenu handling.”
– Jennifer Rodriguez, Lead Designer at Divi Life
Create dedicated mobile menus with Divi Mobile Menu
Divi Mobile Menu allows you to serve your customers a real mobile-first navigation experience. Our extension replaces the native Divi hamburger with a full Divi Builder canvas, so you can build the whole thing visually. Pop in any module you like, from accordions and icons to opt-ins and images.
The plugin knows the difference between desktop and mobile. Your vertical menu will stick around for desktop, but on phones, Divi Mobile Menu slides in, keeping navigation slick and screen space roomy. You can personalize the entrance with animations and overlays, giving clients a polished, modern UX.
For just $34/year – or included in our All Access Pass – you can create stunning mobile menus while ensuring your pages are optimized for engagement.
What’s more, Divi Mobile Menu integrates with our Divi Mega Pro tool, which enables you to build dropdown mega menus in just a few clicks. Check it out below!
Creative Modules Built for Speed
Divi Modules Pro includes gorgeous creative modules without the bloat, & without slowing down your site! Thanks to our dynamic asset engine, you'll get the best modules with the best speed. 🔥
Advanced vertical menus with Divi Mega Pro
Sometimes you need something more than a good-looking stacked menu. Divi Mega Pro allows you to swap any WordPress menu item for a fully custom dropdown, all built with the Divi Builder. It’s a perfect platform for dashboards, catalogs, or anywhere you want a menu that does more than point to another page.
Divi Mega Pro automatically detects vertical navigation mode using Divi’s .et_vertical_nav class, so the mega menu content appears precisely in position. With version 1.9+, you get left/right positioning, meaning mega dropdowns open beside vertical menu items rather than stacking beneath them.
Add transitions for buttery-smooth animations between menu items, so your navigation feels dynamic and polished. Using the Divi Builder, you can build menus packed with images, videos, buttons, or even contact forms. Read our tutorial on how to add eye-catching Divi menu hover effects with Divi Mega Pro for more styling information.
Do More with Divi Mega Pro!
Create beautiful & functional mega menus & mega tooltips with Divi Mega Pro, complete with included templates & advanced functionality. 🔥
Test your vertical menu with the single source rule
Before launching, give your menu the single source audit. Ask yourself: Will I need to edit this menu in more than one place?
Start by making a change in WordPress via Appearance > Menus. Then check your vertical menu on the frontend. If it is updated everywhere, you’re good to go.
Scan your layout for rogue hardcoded buttons or manual links. These are warning signs you’re drifting into double-edit territory, and one update will leave a mismatch somewhere else. The right workflow means your WordPress menu powers navigation across desktop, mobile, mega dropdowns, and everything in between.
If you ever find yourself manually touching two menus for a single update, check your menu setup. Divi, Theme Builder, CSS tweaks, or plugins like Divi Mega Pro should all pull from the same menu source. These methods allow you to avoid sync headaches and ensure clients always see a professional, up-to-date navigation. Life has enough surprises, after all!
Master vertical menus with Divi today
Vertical menus are simply your existing WordPress menu displayed in a smarter way. With either the Theme Builder or Custom CSS method, your navigation stays linked to one source, eliminating duplicate edits forever.
Mobile glitches that once wrecked layouts now have clear fixes, from responsive visibility settings to dedicated slide‑in menus. And to go one step further, Divi Mega Pro adds smooth animations, mega dropdowns, and left/right positioning for vertical layouts. Pair it with Divi Mobile Menu for a fabulous mobile experience all around.
To take control of these two plugins – plus a host of unique Divi extensions, layouts, and child themes – check our All Access Pass before you go!
The Ultimate Divi Toolkit 🚀
The Divi Life All Access Pass membership is a complete Divi toolbox with all the Divi plugins, child themes, layouts, & templates you'll ever need to create incredible Divi websites.
Table of Contents
- When vertical menus beat horizontal navigation
- Your WordPress menu already works (just display it vertically)
- Method 1: Build your vertical navigation with Divi Theme Builder
- Method 2: Transform any menu to vertical with custom CSS
- The core differences between the Divi Theme Builder and Custom CSS approach
- Why does my Divi vertical menu break on mobile?
- Advanced vertical menus with Divi Mega Pro
- Test your vertical menu with the single source rule
- Master vertical menus with Divi today
0 Comments