Change Space Between Divi Header 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.

Divi Standard Menu

Change Menu Item Spacing with Divi Booster

Divi Booster adds an option to set the spacing between items in the default menu. You'll find it on the Divi Booster settings page, at:

Divi > Divi Booster > Header > Main Header > Space between menu items

Like so:

Change Menu Item Spacing with CSS

If you don't have Divi Booster, you can manually increase or decrease the spacing between the menu items in the Divi Theme's main navigation menu, using 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

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

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. This is covered in my post on changing the spacing between menu module links.

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

Divi Booster

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

32 Comments

  1. Hi
    I did what you've mentioned to add space between the menu items and it did not work :-((

    Thanks
    Vladimir

    Reply
    • Hey Vladimir, the menu in your linked site is using a custom Theme Builder header. In that case, you need to use the advice in this post:

      https://divibooster.com/change-the-spacing-between-menu-module-links/

      I just checked the CSS from that post and it seems to work on your site.

      Also, note that these tips are for adjusting the horizontal distance between the main items in the menu. If you're looking for a way to adjust the vertical space between, for example, items in the drop-down menus, let me know.

      I hope that helps,
      Dan

      Reply
  2. Hi. I have a question, when you set the logo in the menu settings, how can I align the logo to the left and the menu itself to the right? some kind of "space-between" css attr.

    Regards!

    Reply
    • Hey Luis, is there any chance you're able to share a link to the site / page you're working on so that I can take a look at how you currently have it set up? Thanks!

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

    Reply

Submit a Comment

Your email address will not be published.