Add Lines Between Divi Menu Items
A lot of our Divi Menu tutorials have been functional, while fewer of them have been about style and design. This tutorial will add some style to your Divi menu! I will show you how to add vertical divider lines between the menu items.
▶️ Please watch the video above to get all the exciting details! 👆
Add Vertical Dividers To The Divi Menu Module
The first snippet here will apply to the Divi Menu module, so you probably will want to be using this in a header template in the amazing Theme Builder.
Using More Than One Menu Module
You don’t need to add any class to the module since we are targeting it, but if you want this effect to only apply to one menu module on your site, then replace the .et_pb_menu with your own CSS class and add that to the module’s CSS field in the advanced tab.
Copy and paste the code snippet below and paste it into your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add borders to the menu items*/
.et_pb_menu nav > ul > li:not(:last-child) {
border-right: 1px solid #2cba6c;
}
/*adjust spacing around menu items*/
.et_pb_menu li a {
padding: 4px 20px;
}Add Vertical Dividers To The Default Divi Menu
Even though I totally recommend using the new Divi Theme Builder and Menu module, I haven’t forgotten those of you who are still using the default header. The snippet is very similar to the one above, except the CSS property is targeting the default menu instead of the Menu module. The step here is exactly the same. Copy the code snippet below and paste it in the Divi>Theme Options>Custom CSS box.
/*add borders to the menu items*/
#top-menu li:not(:last-child) {
border-right: 1px solid #2cba6c;
margin-bottom: 20px;
}
/*adjust spacing around menu items*/
#et-top-navigation nav > ul > li > a {
padding-bottom: 4px!important;
padding-left: 20px;
}Now you have vertical divider lines in your Divi menu!
Customize The Snippets
You may need to play around with the spacing in the snippets to fit your website. For example, you may need to change the margin and padding values to something that works better for your situation. Other than that, you should be good to go!
Be sure to check out our 20 other Divi menu tutorials!
Simple and Cool!
Thank u! 🙂
You’re welcome!
When I use the code, the vertical lines between my menu items are twice as high as the text is. Am I doing something wrong?
This is probably related to some padding on the links.
Works great–Thank you!!
Perfect, glad you found this useful! 🙂
Hi, thanks for this tutorial. What about small vertical dividers in case logo inserted in menu module? Dividers are so height as logo…do you have any idea?
Hi Sebastian,
If you share the link I can take a look!
https://server777937.nazwa.pl/nowe_www/banimex/
any idea?
Looks like you got it with the padding, I was going to say it but you beat me to it!
I am also interested
Hi John, you have to adjust the padding or assign a height. It’s impossible for me to put that in the code since every site is different. Send me the link and I’ll advise.
Thank you so much! It looks great except on the drop down menu items. Do you know how to exclude the sub-menu items for drop down menus?
Hi Cynthia, great question, I updated the code so that it does that by default now, like .et_pb_menu nav > ul > li:not(:last-child)
Hey Nelson,
Awesome article, thank you! Can you tell me the code to add divider lines to the bottom of each item in a Drop down menus also? So this code with the side dividers for the main menu, and then code for bottom dividers for the drop downs?
That would be completely different tutorial. You can check our guide on customizing the Divi Menu dropdown menus and add a border-bottom: https://www.peeayecreative.com/how-to-style-and-customize-the-divi-menu-module-dropdown-submenu/
Likewise… The code for the default menu should be #top-menu > li:not(:last-child) to avoid divider lines in the sub menus.
Thank you for the tutorial Nelson.
Great tutorial, thank you! 🙂 Is there any way to only add the divider between the last two menu items, not between all of them? Would be very useful for language switchers. Thanks! 🙂
Hi Janis,
There is always a way. You might try adding a custom CSS class to the menu items and target them that way.
Hi thanks for the tutorial, it works for the main menu but I actually only want it on my sub menu, is there a code to do that ?
Could you please share the URL of the page where the submenu is present for us to investigate further?
The dividers are still showing in my submenu. The last child is not showing a divider. Changing the code to “first-child” the first child is not showing a divider. That makes sense … but … how to remove the divider from al the items in the submenu?
Hi Anneloes
Could you please share the URL of the page for me to investigate further?
Hi!
The URL is htps://fairdinkumsupport.nl
Please remove the present code that you are using and use the code given below instead:
#top-menu > li{
border-right: 1px solid #ec7034;
margin-bottom: 20px;
}
Let me know how it goes. 🙂
Yes! Problem solved. Thank you so much!
I am glad that the issue is resolved now. 🙂
This works when I am in the theme builder but when I exit the theme builder my menu looks like a bulleted list what am I doing wrong?
That issue would not be related to my tutorial, but rather to Divi. You should contact their support about that.
Hello, and if i want it only at one location like here (between menu and social media icon). How can i do ?
http://www.benjaminlycan.com/
Hey Nicolas,
I saw the URL provided and everything looks fine now. Please let me know if you have any other queries.
Hiy Nicolas,
I would like to know what CSS codes you used to do it. Did you customize some CSS classes?
If I wanted to make the lines a certain height, what would the css look like for that? I have the lines in place but they are too tall and I have adjusted the padding with no difference.
Hi Tyson
Could you please share the URL of the page for me so I can check it?
I want the line height same as text height https://v2gi.com/
Hi!
I was wondering if there’s a way to divide by bullet points instead of vertical lines.
Thanks in advance!
Hey Martijn,
Could you please share the URL of the website for me to investigate it further?
Hi!
I have added the custom CSS, but the lines are too tall. How can I make them as originally intended by you?. The header is a Theme Builder based header (if it makes any difference).
The URL are: https://volkers.dk/home/ (passw: notyet2022 )
Sincerely Kenneth
Hello Kenneth!
Could you please try with the given code below?
.custom_menu li a {
padding: 4px 20px !important;
}
.custom_menu ul#menu-menu-1 {
margin-top: 20px;
}
Result: https://prnt.sc/66o9Vy-dOL5-
Let me know how it goes. 🙂
Hi Nelson
I am also having the long divider issue – not sure why – https://www.bonnerengineering.com/services/combustion-chamber-design/
Happy New Year!! David
Hello David!
Can you please try with the given code below?
.et_pb_menu li a {
padding: 2px 15px !important;
}
.et_pb_menu .et-menu-nav>ul{
align-items: center !important;
}
.et_pb_menu .nav li ul.sub-menu a{
padding: 6px 20px !important;
}
Here is the result: https://prnt.sc/WfjfJzxvYLAE
Wishing you all a very happy New Year!
I am trying to find out how to get help with this blog post. Every time I create a post it disappears. Do those go to moderation or am I have a technical issues? What is the best way to get help with the tutorial?
My issue with this post is I’m trying to determine if the vertical bar can be replaced with a “~” (tilde) character. I’m also wondering if there is a way to isolate the appearance of the menu treatment only to a few pages with a certain menu name. Can someone please help?
All posts go to moderation by default in WordPress yes. Also, please understand we cannot give free customization service beyond the tutorial, so sometimes we prioritize other comments. We spend many hours a week responding to comments, and it can be tiresome but we try our best. Sorry for the delay! This tutorial is using a border, so to add an actual icon it would be a little more complicated and would require a pseudo class, and it could be tricky to align it to the center of each menu item.
Is there a way to select which menu this script affects? For example, I only want it to effect the lower menu on the portfolio pages and I would like to substitute the vertical divider with a special character? I’d like to use the “–” (emdash) or a “~” (tilde).
https://465.9ab.myftpupload.com/portfolio/
Thanks in advance
Hi Jason!
I have checked the page and it seems you have already made the changes.
Let us know if you need any further assistance with it!
Hi Nelson Boss!
I have added the custom CSS, but the lines are too tall. I want the line height same as menu text height https://v2gi.com/.Could you please help me to fix?
Hi Sayed!
The page you have shared above does not exist. Can you please check it again?
Hey, I’m using divi builder and the css works great but when I go build the post content and put in a menu in the sidebar the lines also show on it. Is it possible to make they not show up on sidebar menu in the post content. Thank youi
Hi Kim!
Please replace the .et_pb_menu with your own CSS class and add that to the module’s CSS field in the advanced tab.
Thanks very much for the tutorial! It was very helpful.
I built my global navigation in the Divi Theme Builder. I used your Module script to add the divider lines. Playing around with adding “margin-top” and “margin-bottom” in the “menu li a” code along with some spacing adjustments in the builder itself, I was able to make my two-row navigation have lines that were just about as tall as the nav text with room to space them a bit further apart so they don’t look crammed in there.
Much appreciated!