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 the code snippet below and paste it in the Divi>Theme Options>Custom CSS box.
/*add borders to the menu items*/
.et_pb_menu nav > ul > li:not(:last-child) {
border-right: 1px solid #000000;
}
/*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 #000000;
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! You can change the color of your divider by replacing with your colour code in the snippets.
The Bottom Line
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 change the colours according to your website pattern.
