How to display Divi Menu module vertically on all screen widths

Create vertical navigation in the footer using the standard Menu Module in Divi

Divi’s Menu Module, by default, uses the horizontal layout, was designed for the Header as the horizontal navigation. But there are certain situations (when creating a Footer or a Sidebar layout, for example) when we’d like to display all the menu items vertically, as a simple list of links, without the hamburger mobile menu version.

Yes – we can use the Text module and add our list of links manually, but using the WordPress Menus when selecting links is more user-friendly and opens up additional possibilities.

In this short walkthrough, I’ll show you how to use a few lines of CSS to change the default Menu module appearance and how to add a fun hover effect to your menu links!

This Sample Footer Layout is available to download for free to our subscribers.

Download This Layout Live preview

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!

Can’t see the form? Click here

Change the Menu alignment with CSS

To target a specific module, and not all Menus on the entire website, we’ve added a custom CSS Class in the Menu’s Settings, Advanced section: dl-v-menu. This bit of CSS changes the alignment of that menu and hides the default Mobile menu version with the hamburger icon.

.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;
}

Add hover effect to Menu items

Here’s an example of a fun hover effect, which adds a gray animated line next to the menu item and slighly moves the link to the right.

.dl-v-menu a:before {
    content: '';
    background: gray;
    display: block;
    position: absolute;
    width: 10px;
    height: 2px;
    top: .6em;
    left: -20px;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.dl-v-menu a:hover:before {
    left: -10px;
    opacity: 1;
}

.dl-v-menu a:hover {
    padding-left: 5px;
}

Final Thoughts

Don’t forget to check out the demo page to see the sample footer layout and vertical menu navigation with the hover effect in action!

Sign up for the newsletter so you don’t miss out on any Divi tutorials. Also, keep an eye out for future Divi freebies. If you’re a subscriber feel free to download the Footer layout I created as an example.

As always please leave a comment with your thoughts below! I hope you’ll find this helpful.

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Divi Lover Shop

23 Comments

Dhaval on 2023-09-18 at 19:03

Thank you for this wonderful tutorial. Can you please provide Javascript code so we can make submenu open open on click. Thank you
Reply
- Ania Romańska on 2023-09-19 at 09:20
  
  You might want to check this tutorial. 😉
  Reply
Ocean on 2023-03-15 at 07:31

Download link doesn’t work just loops.
Also subscribe to newsletter link does not work either. It just sends to a blank page.

This is my first time here and I love the design of this site, however broken links I never good. Especially when it’s on a page that is supposed to be a tutorial for menus and links
Reply
- Ania Romańska on 2023-03-18 at 13:48
  
  Hello Ocean,
  I’m sorry to hear you have trouble accessing the free layout. I checked and it looks like your email address is already on our list, so if you fill the sign up form, it should redirect you to the download page automatically.
  Reply
Will Slegg on 2023-03-06 at 11:02

Hi, I had two question about using this – currently the nested menu only lets me click on the lower most child menu item, so the top level isnt clickable as a link – is it possible to do this?

Also, is it possible to have them collapsible – so that you can click the parent element or open the sub menu?

Many thanks in advance 🙂
Reply
- Ania Romańska on 2023-03-09 at 11:25
  
  Hi Will,
  Yes, I’m afraid this solution doesn’t really work well with sub-menus. We’re going to have a separate tutorial on this, as it’s pretty complex and would be difficult to explain in the comments. Stay tuned 😉
  Reply
Ghita on 2023-02-03 at 12:31

Hello, I have a problem with the the vertical menu. I would like to align the vertical menu to the h2 “MENU” but I can find the solution. I have tried text-align and other functions but the menu still being aligned to the right. How can I do it?
Thank you!
Reply
landyvlad on 2022-12-27 at 08:00

Are you able to show which part of the css does which thing?
Specifically I assume this part is the dash which appears?
width: 10px;
height: 2px;
could that be replaced with a character, say a bullet point or arrow?
Reply
- Ania Romańska on 2022-12-27 at 10:18
  
  We’re doing it step by step in the video, so the CSS should be clear 😉 To change the dash to an icon, you’d need a “content” and a “font-family” property on the ::before element.
  Reply
Stephanie on 2022-12-22 at 16:37

This is perfect Ania, especially in combination with the Canvas header (second section). Is there also a way to have submenu items? I have submenu items in my menu, but it shows one list now.
Reply
- Ania Romańska on 2023-01-24 at 11:49
  Hi Stephanie,
  
  This bit of code would display the submenus underneath each parent menu item:
  
  .dl-v-menu.et_pb_menu ul.sub-menu { opacity: 1; visibility: visible; position: relative; border:none; box-shadow: none; width:100%; padding:0 0 0 10px; display:block; left:0; top: 0; } .dl-v-menu.et_pb_menu li.menu-item { display: block; } .dl-v-menu .sub-menu li.menu-item { padding: 0; } .dl-v-menu.et_pb_menu ul.sub-menu a { width:100%; display:inline-block; padding:0; } .dl-v-menu li.menu-item-has-children>a:first-child:after { display:none; }
  
  To make it collapisble, we would also need to add some JavaScript (I will create a separate tutorial about it).
  Reply
  - Jens on 2023-01-25 at 15:26
    
    Super Lösung, vielen Dank! Ich habe ebenfalls Untermenüpunkte und würde sie gerne rechts zur Seite ausklappen:)
  - Stephanie on 2023-02-08 at 16:24
    
    Thank you Ania!
dom on 2022-11-24 at 02:32

greetings,

this is exactly what i needed and solved my problems! i noticed in the visual builder, when it resizes for mobile dimensions the featured images in the filterable portfolio become inverted.
Reply
Nick on 2022-08-17 at 18:22

Hi Ania
This looks fantastic and is just what I am looking for. but when i try and upload it just hangs at 99% and doesn’t finish the import
Reply
Ernst on 2022-02-01 at 15:34

I love this! But how can I get the text to right align instead of left align? With display:block; the text-align:right; doesn’t work 🙁
Reply
- Ania Romańska on 2022-02-01 at 18:05
  You probably just needed a more specific selector. Try with this:
  
  .dl-v-menu.et_pb_menu .et_pb_menu__menu>nav>ul>li { text-align: right; display: block; }
  Reply
  - Ernst on 2022-02-02 at 17:32
    
    Ah, perfect. That worked!
Jean on 2021-12-17 at 16:02

I love this! Thanks for providing this code. Quick question… how do I center this on mobile?
Reply
- Ania Romańska on 2021-12-19 at 15:01
  Something like this should do it:
  
  @media (max-width:980px) { .dl-v-menu ul.et-menu li { justify-content: center; } }
  Reply
  - Jean on 2021-12-20 at 15:47
    
    Perfect! Thank you.
Hurri on 2021-10-08 at 08:45

Hi Ania,
It’s so simple but very effective, I love it!
I have a suggestion for a tutorial snippet – how to make a tooltip (another module) appear on a button hover and positioned near or at the button.
Reply
- Ania Romańska on 2022-02-01 at 18:06
  
  Thank you, Hurri! I’ll see what I can do 😉
  Reply