Change Space Between Divi Menu Items

Divi allows you to display WordPress menus in various places. Here's how to modify the spacing between the menu items in some of those places.

Default Menu: Change Space Between Menu Items using CSS

To increase or decrease the spacing between the menu items in the Divi Theme's main navigation menu, you can use the following CSS:

ul#top-menu > li:not(:last-child) { 
    padding-right: 50px !important; 
}
#et_top_search { 
    margin-left: 50px !important; 
}
The default spacing is 22px, so anything bigger will increase it, while anything smaller will decrease it. Here I've set it to 50px.

Vertical Menu: Change Space Between Menu Items using CSS

Divi includes a feature to change the normally horizontal header / navigation menu into a vertical menu. It can be enabled with the "Divi > Theme Customizer > Header & Navigation > Header Format > Enable Vertical Navigation" option.

To change the spacing between menu items in the vertical menu, you can use the following CSS:

@media (min-width: 981px) { 
	.et_vertical_nav #main-header #top-menu>li.menu-item>a {
		padding-bottom: 29px;
	}
}
The default spacing is 19px, so anything bigger will increase it, while anything smaller will decrease it. Here I've set it to 29px.

Menu Module: Change Space Between Menu Items using CSS

With the arrival of the Theme Builder in Divi 4, it became possible to create custom headers using the menu module in place of the default menu. Changing the space between menu items in the Divi menu module requires slightly different CSS than the default menu.

To change the spacing between menu items in the menu module, you can use the following CSS:

.et_pb_menu ul.et-menu > li:not(:last-child) { 
    padding-right: 50px !important; 
}
.et_pb_menu .et_pb_menu__search-button { 
    margin-left: 50px !important; 
}

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

28 Comments

  1. I really love divi theme on my site. It's really awesome!

    Reply

Submit a Comment

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