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.

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!


  1. Ernst

    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 🙁

    • Ania Romańska

      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;
      • Ernst

        Ah, perfect. That worked!

  2. Jean

    I love this! Thanks for providing this code. Quick question… how do I center this on mobile?

    • Ania Romańska

      Something like this should do it:

      @media (max-width:980px) {
          .dl-v-menu li {
              justify-content: center;
      • Jean

        Perfect! Thank you.

  3. Hurri

    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.

    • Ania Romańska

      Thank you, Hurri! I’ll see what I can do 😉


Submit a Comment

Your email address will not be published.

I want to stay in touch! I’d like to receive special offers and tutorials from Divi Lover. Sign me up for awesome content! I know that I can unsubscribe at any time.

Enjoing our content?

You might find this interesting…

License Details


Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.


Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements


  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)


  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module


  • allow_url_fopen