Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make A Vertical Divi Menu

Nelson Miller Profile Orange
In this tutorial I will show you how to make a vertical stacked Divi menu using the Menu module, which would be great in footers and sidebars!

▶️ Please watch the video above to get all the exciting details! 👆

Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to Advanced tab to the CSS IDs & Classes toggle and place the class “pa-vertical-menu” in the CSS Class input field.

Add The CSS Snippet To Your Site

Now for the fun part, adding the CSS snippet. This is easy and all you have to do is copy it below and add it to your site.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*remove default 11px padding on each side of list items*/

.pa-vertical-menu .et-menu > li {
	padding-left: 0px;
	padding-right: 0px;
}


/*make the menu items fullwidth and add space between them*/

.pa-vertical-menu .et_pb_menu__menu nav ul li {
	display: block;
	width: 100%;
	margin: 10px 0;
}


/*style the menu items*/

.pa-vertical-menu .et_pb_menu__menu nav ul li a {
	padding: 20px!important;
	background: #f0f3f6;
	border-radius: 6px;
	border: 2px solid #f0f3f6;
}


/*style the menu items on hover*/

.pa-vertical-menu .et_pb_menu__menu nav ul li a:hover {
	opacity: 1!important;
	color: #ffffff;
	background: #00d263;
	border-color: #00d263;
}


/*style the active menu item*/

.pa-vertical-menu .et_pb_menu__menu nav ul li.current-menu-item a {
	opacity: 1!important;
	color: #ffffff;
	background: #00d263;
	border-color: #00d263;
}


/*style the arrow icon if there are submenus*/

.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children>a:first-child:after {
	content: "5" !important;
	/*change arrow icon for submenu*/
	padding: 20px;
	font-size: 24px;
}


/*style the arrow icon if there are submenus to submenus*/

.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children .menu-item-has-children>a:first-child:after {
	padding: 8px !important;
	right: 0px !important;
}


/*make the submenu align directly to the right of the menu item instead of below*/

.pa-vertical-menu .et_pb_menu__menu nav ul li ul {
	top: 0!important;
}


/*align submenu to the right of menu link*/

.pa-vertical-menu .et_pb_menu__menu nav li ul {
	left: 100%!important;
}


/*add an icon to the left of each menu item link*/

.pa-vertical-menu ul li a:before {
	font-family: 'ETMODULES';
	content: '\24';
	text-align: center;
	vertical-align: middle;
	margin-right: 8px;
	margin-left: 0px;
	color: #00d263;
	font-size: 1.3em;
	transition: all .75s ease;
}


/*style the menu items icon*/

.pa-vertical-menu ul li a:hover:before {
	margin-left: 7px;
	color: white!important;
	transition: all .75s ease;
}


/*style the active menu item icon*/

.pa-vertical-menu ul li.current-menu-item a:before {
	margin-left: 7px;
	color: #ffffff!important;
}

@media (max-width: 980px) {
	/*open the mobile menu up and use on all devices*/
	.et-db #et-boc .et-l .pa-vertical-menu .et_pb_menu__menu {
		display: flex;
	}
	/*hide the hamburger icon*/
	.et-db #et-boc .et-l .pa-vertical-menu .et_mobile_nav_menu {
		display: none;
	}
}

Code Summary Explanation

You can see each snippet of the code has a comment with a brief explaination of what it does. This should cover it pretty well, but here is a summary of what is happening. Keep in mind almost all of this is optional, and it is intended to be customized. Use this as a base and make it your own!

The first part of the code is removing some default padding on the left and right of the menu items.

Next we are making each menu item a block element set to 100% fullwidth.

Next we are adding some optional styling to the link color, background color, padding, and a border, and then adjusting that styling for when you hover over it.

We are using the same styling for the active menu item as we are using for hover. This also is optional and can be customized however you want.

If you use a submenu, meaning if you have child items under any menu item, then there are a few adjustments that we are making to those. The arrows that indicate a submenu need adjusted, and the position of the submenu is now aligned directly to the right of the parent menu item.

Next we are adding some arrow icons to the left of the menu items. These of course are optional, but they look pretty nice. They are also styled to move over to the right a little and change color on hover.

The last part of the code has a media query, and this code is used to open up the mobile hamburger menu. In other words, this part is just like our other tutorial here. This is optional, but we added this so that the menu would be stacked vertically the same on any device.

Categories: Divi Menu Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

64 Comments

Comments By Others

  1. GAL

    Hi Nelson, I have a similar problem. In my case the menu module does not work in the frontend, in the archive page templates of a custom post type created with the theme builder. Everything works perfectly in the other pages and in the templates created for the classic WP taxonomies.

    Is it possible to make the menu module work in the archive pages of a template for a Custom Post Type?

    Thank you 🙂

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi GAL!

      There must be no issue with the archive page normally. Maybe some codes are causing the issue. Can you please share the page URL to check further?

      Reply
  2. Connie Müller

    Hi!
    I have a special question and I am looking for a solution for a long time now.

    Is it possible to define which hierarchy level to show?
    Explanation:
    The main menue with 1st level links should sit horizontally on the top of the screen.
    When one of these main items is clicked, all lower level menue items should be placed to the left …

    => 1st level menue horizontally, 2nd and all other levels vertically on the left

    An example, realized with another small CMS (GetSimple) shows better what I am looking for: https://www.lyriktext.de

    Is this possible?

    Thanks in advance. Connie

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Connie!

      In that case, you can create different menus in Appearance > Menus. Then create different templates in the theme builder for different pages, and assign the menu according to it.

      Reply
  3. Charlotte

    Hi! When I use your example code, all items but the first one jump a bit to the right somehow. Menu used is not nested, and in your example images everything is aligned perfectly. Do you maybe have an idea how this could happen? I’m breaking my brain.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Charlotte!

      There must be some extra code causing the issue. Can you please share the URL of the page to check further?

      Reply
  4. Dylan

    I’ve got a vertical menu sub-navigation in the body of a page on my site, which I’m forcing to display as desktop on mobile. I want the individual menu items to be vertically centered, but all I’ve managed to accomplish is centering the module, not the menu item text itself. Any recommendations? Really stuck here. text-align:center; doesn’t seem to be working no matter what I target.

    Reply
  5. Steven

    Thanks Nelson! It works great but I have two different menus in the footer and on mobile and tablet my second menu items are off-centered in the column. I can’t figure out how to correct this.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Steven,
      I believe you are asking to have this applied to two different menus with some different modifications to each. For that, you can always duplicate the code with a new selector for each module.

      Reply
  6. MB

    Can someone explain why this works fine on a regular page but not when used in the theme builder
    Is this a divi issue?

    Reply
      • GAL

        Hi Nelson, I have a similar problem. In my case the menu module does not work in the frontend, in the archive page templates of a custom post type created with the theme builder. Everything works perfectly in the other pages and in the templates created for the classic WP taxonomies.

        Is it possible to make the menu module work in the archive pages of a template for a Custom Post Type?

        Thank you 🙂

  7. Brandon

    If anyone wants to use the code provided by peeaye, but strip down a lot of the styling, this is what I did. Most importantly, I have a new style here that will make your menu align left instead of floating uncontrollably toward the center of mobile browsers. My modification only affects mobile and tablet, and leaves desktop alone.

    It also assumes that you have display: inline-block applied to two modules that you wanted next to each other on desktop (a label followed by the menu). You can erase these first 2 blocks of code and the corresponding matching ones in the media query if you aren’t using two inline-blocks next to each other…

    /*putting label next to the menu items on desktop*/
    .et_pb_text_0_tb_footer {
    display: inline-block;
    }
    .et_pb_menu_0_tb_footer.et_pb_menu {
    display: inline-block;
    }

    /*START NO HAMBURGER + VERTICAL MENU ON MOBILE*/
    /*getting rid of hamburger menu on footer for tablet and mobile*/
    @media (max-width: 980px){
    /*putting label on top of the menu items on tablet and mobile*/
    .et_pb_text_0_tb_footer {
    display: block;
    }
    .et_pb_menu_0_tb_footer.et_pb_menu {
    display: block;
    }
    .pa-vertical-menu .et_pb_menu__menu{
    display: flex !important;
    }
    .pa-vertical-menu .et_mobile_nav_menu{
    display:none;
    }
    /*remove default 11px padding on each side of list items*/
    .pa-vertical-menu .et-menu > li {
    padding-left: 0px;
    padding-right: 0px;
    }
    /*make the menu items fullwidth and add space between them*/
    .pa-vertical-menu .et_pb_menu__menu nav ul li {
    display: block;
    width: 100%;
    margin: 10px 12px;
    }
    /*gets rid of that annoying flex wrap with uncontrollable margin on mobile and tablet*/
    .pa-vertical-menu .et_pb_menu__wrap {
    display: block;
    }

    /*make the submenu align directly to the right of the menu item instead of below*/
    .pa-vertical-menu .et_pb_menu__menu nav ul li ul {
    top: 0!important;
    }
    /*align submenu to the right of menu link*/
    .pa-vertical-menu .et_pb_menu__menu nav li ul {
    left: 100%!important;
    }
    }
    /*END NO HAMBURGER VERTICAL MENU*/

    Reply
  8. Laura

    Merci beaucoup pour ce merveilleux code ! (in my french mind is what i think so i write it in french : )

    How i could align this vertical menus in the center of each columns. I explain : I am building a row with 4 columns in divi and add 4 different menu module using this code.

    I was wondering if there is a way to centre the menu items in each column? rather than them being left aligned?

    The website is under construction (hidden behind a landing page) and i use the shop page to built the footer. To visit the page where footer is : https://www.lokeezi.com/boutique (the weird colors help me to watch where is the border of each column and the row.
    Later, i will set all with white colors.

    Merci d’avance,
    Laura

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      HI Laura!

      I can see that you’re using Text module instead of Menu module in footer. Please add the following code in Column settings > Advanced > Custom CSS > Main element in each column:

      align-items: center;

      Let me know how it goes!

      Reply
      • Laura

        Thank you for your help. It works fine. And i could add more text with this css.
        Now, i need to know : Please could you modify my first topic and delete the address of the website. Because of CEO improvement. And i cannot change this text.

        Have a great day

  9. Jeff

    Thank you for your tutorial. My menu is wrapped on longer menu items. Is it possible to indent the second line of a menu item to be inline with the top line?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Jeff!

      Please try changing the column structure of the row and use a larger column for the menu module. If it doesn’t help, Could you please provide the URL of the exact page that you are talking about in order for me to check it and resolve the issue?

      Reply
  10. Adam Atkinson

    Thank you for this wonderful code and adjustment. I wonder if you could help me further, is there any way to make the sub menus in this sidebar menu expand down on click rather than appear when hovered over?

    Many thanks

    Kind regards

    Reply
  11. Vicky Tosh-Morelli

    As always, just what I needed and the CSS was so clear I could easily update to match my styles.

    Reply
  12. Heather Jensen

    Hi Nelson, great tutorial! I have used this on several websites, but I do have a quick question. The sidebar menu that you have created in the tutorial, how would I make it not sticky? Right now, the body/ content scrolls on the right and the sidebar nav is sticky. I have tried to disable it under Appearance > Scroll Effects > Do Not Stick, but it is sure being a sticky booger. 😉

    Thanks for all your help. You can see it sticking on this provided.

    Reply
  13. Amar

    Hi Nelson,

    How can I change the CSS, so the submenu item will collapse/slide below, and move the other menu item down.
    Like an accordion/toggle.

    Is that possible?

    Thanks.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      For that maybe if you were showing the mobile menu on desktop, which would be beyond this tutorial but might be worth trying by hiding the desktop version and showing the mobile version.

      Reply
  14. Riette

    Thank you so much for this! 🙂

    Reply
  15. Bryan Gilchrist

    So, I thought DIVI was supposed to make life easier? Instead we’re having to input hundreds of lines of code to get things to work.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      I thought our tutorials were to make life easier? Instead annoying people like you leave irrelevant complaint and spam my posts. Yes, I am posting this publicly so people see how not to be thankful.

      Reply
  16. Danny

    Wonderfull! I was wondering if it’s possible to see the submenu items stacked as wel instead of a hover ‘pop-up’. So if i click on a main-item, the subitems of that main-item fold out under the main-item.

    Reply
  17. Ed

    Hi, thanks for this wonderful tutorial!
    One question: How can I make one specific button in the menu a different color?
    Thanks!!

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey ED,

      Just go to the Appearance > Menus and click the arrow icon beside the menu item and there you will see the option to add a CSS Class, add a class there and then use that class to provide the styling you want to give to that specific menu item. If you don’t see an option to place the class, please click the screen options at the top right of the page and there tick the CSS Classes box.

      Reply
  18. Rachael

    Hi, I was wondering if there is a way to centre the menu items? rather than them being left aligned? I have tried adding text-align: center; but that hasnt made any difference.
    Thanks

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Rachael,

      It would be great if you share the URL so that I can have a closer look and solve this issue for you.

      Reply
      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        I have checked the page and the menu items are aligned in the center. Can you please clear the browser cache and check again?

      • Brent

        Hey Nelson!

        First off, thank you for all of your incredible content. It has definitely helped me become a better divi designer!

        Second… unfortunately putting !important did not change anything.

        I’m trying to use this in a global header… would that make a difference?
        Otherwise I followed your tutorial exactly as your video showed… so I’m kind of at a loss!

        I attached the page so you can see it in action. Maybe there’s something I’m missing.

      • Brent

        Hey Nelson! First off, thank you for all of your awesome content! You’ve definitely helped me grow as a divi designer!

        Second… unfortunately still a no-go.

        I’m attempting to do this within a custom header. Shouldn’t affect it though, right?
        Any other settings maybe I need to make sure aren’t affecting this at all?
        Still just staying left justified. Scratching my head trying to figure out what could be the hang-up…

      • Brent

        Unfortunately that code did not achieve the desired effect. The menu still stays left justified. Bummer 🙁

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        Hi Brent!

        Please add the following code for centering the menu items:

        .pa-vertical-menu .et_pb_menu__menu nav ul li a{
        text-align: center;
        }

        Let me know how it goes!

      • Brent

        I came here to ask the same question. My site isn’t live yet, so I can’t provide a link, but this website shows what I’m looking to do. https://pearlsseafoodmarket.com/

        Any idea what css would need to be added to achieve that?

  19. Dennis van Amstel

    Hi Nelson,

    Thank you for sharing and explaining this code.

    I have used it on the following website http://www.evinrudeshop.nl in de menu on the left side of the page.

    It works well for 80%, but there seems to be a problem if you go to a category page. Then the layout (sizes of the left buttons) and the bordercolour of the active menubutton are changing.

    On a productpage it looks normal again.

    Can you see what I have done wrong on this and explain what I have to do to solve this little problem.
    Do I need some extra code for the submenu items?

    Thanks for your respons.

    Best regards,

    Dennis

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Dennis,

      On the category pages, there is an extra padding that is getting applied on the left and right side of the menu item and also the width of the link is being reduced. To cure this issue, please use the code given below and see if that helps:

      ul#menu-menu-links li{
      padding: 0 !important;
      }

      ul#menu-menu-links li a{
      width: 100% !important;
      }

      Let me know how it goes. 🙂

      Reply
      • Dennis

        Hi Hemant,

        It seems the problem with the blue line is solved.
        Perhaps there was some old cache.

        Thanks for your support.

        Dennis

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        You’re welcome, I’m glad that the issue is solved now. 🙂

      • Dennis van Amstel

        Hi Nelson,

        Thanks for your reply.
        It works well.

        I have one question left.
        On all the pages there is a red line at the top of the submenu.

        Except for the productpage. There the line is blue.
        How can I change that one in red as well.

        Thanks in advance for your reaction.

        Best regards,

        Dennis

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        Hey Dennis,

        I have checked the website and I am not able to spot the blue line on the product page. Could you please provide the URL of the exact page that you are talking about in order for me to check it and resolve the issue?

  20. Conrad

    This helped a lot. However, now, instead of a disc or circle, or whatever, my browser shows a $ before each item on the vertical menue.

    Reply
    • Conrad

      I found the CSS section that was adding the pre-fixed icon and removed it. Problem solved. Where is a tutorial for a tyro that would help me to add the CSS necessary to modify the fonts, etc. of menu items?

      Reply
      • Rosie

        Hi Conrad,

        The same is happening to me with the “$” sign, how did you fix it?

        Is weird though cause it only appears on some of the pages, but the menu I’m using I have saved it as global, so it should be the same for all pages…

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        I am glad that the issue is resolved now. For changing the font of the menu items you can use the code given below and see if that helps:

        ul#top-menu li a{
        font-family: cursive;
        }

        Let me know how it goes.

      • Conrad

        Hi, Nelson. Here is the link: https://staging3.ohioyearlymeeting.org/library/#
        If you scroll down, some of the items that I had set up previously have normal discs for list entries. However, the entries that I set up using your CSS have $ signs before them.

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        Hey Conrad,

        I have checked the website and I can’t see any $ sign on the website so please let me know if I am missing out on something here. Also if you face any issues with the icons then it will be great if you go to Divi > Theme Options > Performance and disable the Dynamic icons options and check if that helps.

        Let me know how it goes.

  21. Vanda

    Hey, great tutorial as always! Thank you very much! 🙂 This is exactly what I was looking for.

    However I get one issue when on the tablet or phone view – the menu submenus get “outside” of the website field, meaning it add a horizontal scrolling and white field to the right side of the website.
    Is there a way to fix this?
    Thank you! 🙂

    Reply
      • Andrej Vaughan

        Hi, I have applied the CSS code to make standard menu vertical which works fine for PC and mobile view but appears indented on Tablet view … any idea what I can do to adjust this for tablet view only? Is not possible to realign within Divi

      • Vanda

        Hi Nelson,
        My issue is that I have a submenu and then one more level of submenu, so on the smaller screens it all lines horizontally to the right side of menu link of the parent and then runs “out of the screen”.
        So I made the 1st level submenu show up on the left (covering) parent menus by adding media query:
        @media (min-width: 980px) {
        .pa-vertical-menu .et_pb_menu__menu nav li ul {
        left: 100%!important;
        }
        }
        But the 2nd level submenu is still not visible on mobile version.

        Any suggestions on how to fix this situation better?

        Thank you!

      • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        Hey Vanda,

        I have read your query and it would be great if you can share the URL so that I can have a closer look to the placements and create a code to solve the issue.

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart