The Divi theme includes several ways to add menu to your site. I've written before about how to add separator bars to links in the main header. This post covers how to achieve the same effect in the Divi menu module. Specifically, here's what we're trying to achieve:
Here are several ways to add the vertical lines between the menu items.
Add Vertical Bars to the Menu Module with Divi Booster
Divi Booster includes the option to add vertical separator bars to the menu module. You can activate it by enabling the following menu module option:
Menu Settings > Design > Layout > Vertical Separator Bars
Like so:
This feature is available in Divi Booster version 3.4.0 and later.
Add Vertical Bars to the Menu Module with CSS
You can use the following CSS code to add vertical bars to the menu module:
.et_pb_menu .et-menu.nav > li + li > a:before {
position: absolute;
left:-11px;
transform: translateX(-50%);
content: '|';
font-size: smaller;
}Related Post: Adding CSS to the Divi Theme
To restrict the effect to only certain menu modules, replace the ".et_pb_menu" part with ".et_pb_menu.vertical_bars" and add "vertical_bars" to the CSS Class field of the menu module (Menu Settings > Advanced > CSS ID & Classes > CSS Class).
Thank you – worked the best! Other's code made the bar way too tall! A+
Great! I'm glad to hear it helped, John :)
Thank you for this. Is there any way yo remove the bars from the dropdown menu portion?
You're welcome, Greg. I've just updated the CSS in the post to fix the issue of the bars from showing next to the dropdown menu items. I fixed the same issue in Divi Booster a while back (v3.5.2, I believe), so if you're using it to add the vertical bars to the menu module, updating to the latest version should solve the issue.
I hope that helps, but let me know if you're still having problems with it. Cheers!