Vertical Menu For Footers & Sidebars
There are at least two good use cases for vertical menus, and there is no way to create one in Divi by default. But don’t worry, it’s very easy to modify the Divi Menu module and make the items stack vertically. So in this tutorial I will show you how to make a vertical stacked menu with the Divi Menu module and provide some great styling bonuses.
▶️ 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.
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 🙂
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?
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
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.
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.
Hi Charlotte!
There must be some extra code causing the issue. Can you please share the URL of the page to check further?
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.
Hi Dylan!
Can you please share the URL of the page to investigate further?
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.
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.
Can someone explain why this works fine on a regular page but not when used in the theme builder
Is this a divi issue?
It sounds like you may just need to add the theme builder CSS selectors like .et-el to the code, which sometimes is required in Divi.
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 🙂
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*/
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
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!
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
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?
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?
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
We have various other tutorials about collapsing the submenu, maybe those will answer your question.
As always, just what I needed and the CSS was so clear I could easily update to match my styles.
That’s great to hear!
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.
I am not sure, it sounds like a technical issue though that you may need to contact Elegant Themes about.
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.
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.
Thank you so much for this! 🙂
You’re welcome!
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.
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.
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.
No that would sound more like a toggle, and the menu and especially this tutorial is not set up for that.
Hi, thanks for this wonderful tutorial!
One question: How can I make one specific button in the menu a different color?
Thanks!!
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.
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
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.
I have checked the page and the menu items are aligned in the center. Can you please clear the browser cache and check again?
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.
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…
Unfortunately that code did not achieve the desired effect. The menu still stays left justified. Bummer 🙁
Can you try adding !important and let us know if that helps.
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!
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?
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
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. 🙂
Hi Hemant,
It seems the problem with the blue line is solved.
Perhaps there was some old cache.
Thanks for your support.
Dennis
You’re welcome, I’m glad that the issue is solved now. 🙂
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
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?
Hi Nelson! Thanks for the tutorial. I have a problem, on mobile the menu items are not displayed vertically
You can check on this URL: https://test.uxdividemos.com/menu-vertical-en-divi/
Can you help me?
The media query part of the code controls that, so check that and you can always check our other tutorial linked there in the explanation.
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.
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?
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…
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.
Hi Conrad, I would need to get more context and a link to be able to help.
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.
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.
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! 🙂
You can check this other tutorial here: https://www.peeayecreative.com/how-to-solve-the-horizontal-scroll-issue-in-divi/
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
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!
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.