How to create a vertical menu in Divi without plugins? Learn how to display a standard Divi Menu module as a list of links with collapsible sub-menus!
In this Divi tutorial, we’re going to learn how to customize the Divi Menu Module to turn it vertical, to add collapsible submenus – and to keep the menu visible on any screen size. This layout will be super helpful for footers and sidebars, for example. This could be accomplished using a Text Module, but using a Menu module gives us a few advantages – for example, if we use plugins to enhance our Menu modules, this module will be positively affected as well.
We already have one tutorial on creating a vertical menu in Divi, but in this tutorial, we’ll focus on adding collapsible submenus. We’ll be using custom CSS and jQuery.
You can watch the video for a step-by-step explanation (it’s a replay from my exclusive Divi Stylist Community on Circle), read the article and copy the code, or do a combination of both. I hope you have fun and find the steps easy to follow!
Heads up! If you don’t feel up to coding with CSS and jQuery or just want a quick solution to get a beautiful vertical menu for Divi, you can download this free layout! It contains four vertical menu options, and you can use them for any project, personal or commercial, for free.
Step 1
Create a Menu module
We’ll be using a standard Divi Menu module for our navigation. To make it work, add a custom CSS class of dl‑v‑menu to the Menu Settings -> Advanced tab.
Step 2
Add the CSS Snippet
Place the CSS code in yout Theme Options or child theme stylesheet:
.dl-v-menu .et_pb_menu_inner_container,
.dl-v-menu .et_pb_menu__wrap,
.dl-v-menu .et_pb_menu__menu,
.dl-v-menu.et_pb_menu .et_pb_menu__menu>nav,
.dl-v-menu.et_pb_menu .et_pb_menu__menu>nav>ul {
display: block;
}
.dl-v-menu .et_mobile_nav_menu {
display: none;
}
#page-container .dl-v-menu ul.sub-menu {
position: relative;
visibility: visible;
opacity: 1;
top: 0;
left: 0;
width: auto;
border-top: none;
box-shadow: none;
display:none;
transition: none;
}
#page-container .dl-v-menu ul.sub-menu a {
text-transform: none;
background:none;
}
#page-container .dl-v-menu li {
display: block;
width: fit-content;
}
#page-container .dl-v-menu li a {
width:fit-content;
display: inline-block;
}
.dl-v-menu .menu-item-has-children>a:first-child:after {
display: none;
}
span.dl-sub-toggle {
font-family: 'ETmodules';
display: inline-block;
line-height: 18px;
text-align: center;
width: 20px;
height: 20px;
border: 1px solid #666;
transform: scale(1.2);
transition: .3s ease;
cursor:pointer;
}
.toggled > span.dl-sub-toggle {
transform: scale(1.2) rotate(180deg);
}
Step 3
Add the jQuery code
The jQuery script can be placed inside a Code module directly on your page, or (if it’s a functionality you’d like to use globally in various places on your website) inside the Theme Options Integration tab.
<script>
jQuery(document).ready(function($) {
$('.dl-v-menu ul.sub-menu').before('<span class="dl-sub-toggle">3</span>');
$('.dl-v-menu .menu-item-has-children').off('touchend');
$(document).on('touchend click', '.dl-sub-toggle, .dl-v-menu li.menu-item-has-children > a[href="#"] ', function(e){
e.preventDefault();
$(this).siblings('ul').slideToggle();
$(this).parent().toggleClass('toggled');
});
});
</script>Final Result
And that’s it!
Here’s the demo of the Menu module with the dl-v-menu CSS class that uses the code shared in this tutorial. If you’d like to style the sub-menus differently, stay tuned, we’re going to share a few examples soon!
That’s how you add verical sub-menus to a Menu module in the Divi Builder!
I hope you found this tutorial helpful and easy to understand. Let me know in the comments if you’ll be using a vertical menu in your Divi projects, and stay tuned for our next tutorial! If you have any questions or want to ask for advice or clarification, hit me up in the Divi Lovers Facebook group.
Hello, and thanks. Is there a mode to leave the menu opened and the selected ‘submenu item’ highlighted in the loaded page?
I searched for a vertical menu with DIVI for a long time. It seems I found it now ;=)
But I still have one idea which I do not know how to realize it:
I need a horizontal menu with vertical submenus: When one of the parent links in the horizontal menu is clicked, the submenu should open vertically at the left side
An example explains it better:
https://www.lyriktext.de/werk/
in short: 1stlevel items horizontally at the top, 2nd … levels at the left vertically
Is there a way to realize that?
Hi Connie,
You can simply use two separate menus to achieve what you need. This is what’s happening on the example website: there is a main horizontal menu, and some pages have additional vertical menu in the sidebar.
I will try.. thank you!
Hi Ania,
I just want to start by saying that I love your tutorials – great work! 🙂
I’ve used this guide with success – but I wonder if there is any way to get the whole parent link clickable instead of just the little arrow? The link to my. parent doesn’t have to work.
Thanks!
Sure, it will work if you replace the parent menu item by a “Custom Link” with # set as the URL, or if you disable top tier menu links in Divi theme Options -> Navigation -> General Settings.
Hello Ania,
Your tutorial seems the best solution for the menu I’m trying to build, but I can’t get the script jquery to work, and I found it super weird.
Whenever you get the time, would you help me ? I placed the right code at the right places, but for some reason it doesn’t work. The submenus aren’t displaying and the toggle disappears.
Hi Julie! I’m so sorry for the late reply! I can see that you got this sorted already, menu is looking great 😉
Hi Ania,
Thanks for responding so quickly! So far I am just working on the Home page concept on a dev server. I can’t give you access without the owner’s permission unfortunately.
However you already answered my question in a response to a comment regarding your “Create vertical navigation in the footer using the standard Menu Module in Divi” post!
The CSS snippet you provided-
@media (max-width:980px) {
.dl-v-menu ul.et-menu li {
justify-content: center;
}
}
– was the exact solution I needed.
Thanks once again Ania!
Glenn
Hi Ania,
I am a fellow lover of Divi. As a WordPress developer it’s made my life so much easier.
I learned a lot from your vertical menu tutorial. I am using it in the footer of a new site I’m designing. However I cannot get the vertical menu to align to center on tablet and mobile media. It looks odd left-aligned on a phone. Could you point me in the right direction? I would really appreciate it!
Thanks for the hard work you share.
Hi Glenn, do you think you could share your website URL? And please clarify if you need to center-align text links inside or just the module itlself?