Change the Space Between Divi Menu Items

Written by Dan Mossop

The standard header in Divi includes a menu for your main site navigation links. Given their prominent position on the page, it's important to ensure they are look good and are easy to read. This tutorial will show you how to adjust the menu item spacing and make this all-important element look the way you want it to.

Divi doesn't include an option to adjust the Divi menu item spacing. For the standard Divi header, it can be done using either the option added by the Divi Booster plugin, or using custom CSS code added into the Divi Custom CSS area. If you're using the menu's vertical format, different CSS code is required.

This post covers changing the spacing between menu items in the standard Divi header menu. If you want to adjust the spacing in the Divi menu module (e.g. in a custom header / footer), please see our post on changing the spacing between menu module links instead.

Before

Before we start, here's an example of how the standard Divi header menu normally looks. As you can see, the menu items are packed quite tightly together.

After

Now here's an example with increased space between the menu items. As you can see, the increased whitespace between the menu items creates a different feel to the menu. By taking control over the menu item gap, you can make sure that the look and feel of the menu spacing suits your design perfectly.

Change the Divi Menu Item Spacing with Divi Booster

A simple way to increase the menu item spacing is using the Divi Booster plugin. Divi Booster adds a wide range of new settings to Divi, including the option to set the Divi menu item spacing. This will lets us increase the space between menu items easily, without the need for code.

Get Divi Booster

Our popular Divi Booster plugin adds hundreds of new features to Divi, including the one we need here.

If you haven't already done so, grab your copy of Divi Booster now. You'll then be provided with a copy of the divi-booster.zip plugin file.

If you have already purchased Divi Booster, you can obtain the Divi Booster plugin zip file from within your Divi Booster account.

Download the plugin zip file to your computer, ready for installing in the next step.

Install Divi Booster

The plugin zip file can then be uploaded to your own site at:

WP Admin > Plugins > Add New Plugin > Upload Plugin

There, click "Choose File", locate and select your divi-booster.zip file and then click "Install Now". Once uploaded, click the button to activate the plugin and the feature will be added to Divi.

Open the Divi Booster Settings Page

Now, in your WordPress dashboard, look for the "Divi" option in the left-hand menu, then click on it. Under the Divi menu, you'll find "Divi Booster” – select it to open the Divi Booster settings page. This will bring up Divi Booster's main settings that can be applied globally to Divi.

Adjust the "Space between menu items" setting

On the Divi Booster settings page, expand the "Header" settings section, and then the "Main Header" sub-section. Here you'll find an option called "Space between menu items" which can be used to set a custom spacing between items in the main Divi menu. Check the setting to enable it and then enter the space (in pixels) that you'd like to have between each menu item.

Note that the default Divi menu link spacing is 22px, so anything bigger will increase it, while anything smaller will decrease it.

Save the Divi Booster settings

Now, save your Divi Booster settings by clicking the "Save Changes" button at the top of the settings page. This will apply the Divi menu spacing adjustment to your site.

View your Divi Menu's Modified Spacing

If you now view your site on the front-end you should see the result of applying the "Space between menu items" setting. The gap between menu items should have increased or decreased depending on the value you set for the spacing.

Change the Divi Menu Item Spacing with CSS

If you are comfortable working with code, you can manually increase or decrease the spacing between the menu items in the Divi Theme's main navigation menu with CSS code.

Open the Divi Theme Options

Divi's Theme Options include various settings for configuring Divi, including the option to add custom CSS code. To open the theme options, from your WordPress dashboard, click on "Divi" in the sidebar menu, then the "Theme Options" sub-menu item.

Navigate to the "Custom CSS" Setting

Now click on the "General" tab in the Divi Theme Options, which brings us to Divi's main site-wide settings. Scroll to the bottom and you should see a box called "Custom CSS" which allows you to add your own CSS code alongside that already added by Divi:

Add Divi Menu Item Spacing CSS into the "Custom CSS" Setting

Let's go ahead and add the CSS code snippet that will let us increase the space between Divi menu items. Here's the CSS you'll need:

ul#top-menu > li:not(:last-child) { 
    padding-right: 50px !important; 
}
#et_top_search { 
    margin-left: 50px !important; 
}

Related Post: Adding CSS to the Divi Theme

It simply adjusts the spacing (using margin and padding) between menu items and also the search icons, to give a consistent, adjusted spacing amount. The default spacing is 22px, so anything bigger will increase it, while anything smaller will decrease it. Here I've set it to 50px.

Save the Divi Theme Options

To apply the changes, we need to save the Divi Theme Options. This can be done by clicking the "Save Changes" button at the top or bottom of the Divi Theme Options area: