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!
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. 🙂
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?
Yes! Problem solved. Thank you so much!
I am glad that the issue is resolved now. 🙂
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. 🙂
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?
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.
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!