Add Vertical Separator Bars to the Divi Menu Module

|

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;
}
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).

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Thank you for this. Is there any way yo remove the bars from the dropdown menu portion?

    Reply
    • 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!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *