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;
	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


Submit a Comment

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