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.
54 Comments
Comments By Members
Comments By Others
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.
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.
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 🙁
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?
Can you try adding !important and let us know if that helps.
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
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!
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?
I am not sure, it sounds like a technical issue though that you may need to contact Elegant Themes about.
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.
We have various other tutorials about collapsing the submenu, maybe those will answer your question.
That’s great to hear!
You’re welcome!
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.
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.
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.
No that would sound more like a toggle, and the menu and especially this tutorial is not set up for that.
You’re welcome, I’m glad that the issue is solved now. 🙂
Hi Hemant,
It seems the problem with the blue line is solved.
Perhaps there was some old cache.
Thanks for your support.
Dennis
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?
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.
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.
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 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 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!
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, 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.
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.
You can check this other tutorial here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-solve-the-horizontal-scroll-issue-in-divi/