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

41 Comments

  1. hi,
    how to change the spacing between the primary and secondary menu please ?

    Reply
    • Hi dobermann,

      If you want to actually have a gap between the primary and secondary menu, you should be able to do so with this CSS:

      #main-header { margin-top: 40px; }

      You can add it into the "Divi > Theme Options > General > Custom CSS" box. Note that the site background / page content will be visible within this gap.

      If you just want to make the secondary header taller, pushing the primary menu down, you can use this instead:

      #top-header { padding-bottom: 40px; }

      Or to add the extra space to the top of the primary menu, use this:

      #main-header { padding-top: 40px; }

      I hope one of these helps, but if not or I've misunderstood what you need, please let me know (with a link to the site you're working on, if possible).

      Thanks!
      Dan

      Reply
  2. I get an error now, "expected COLON" after first line and "Unexptected token '}'" after last one.

    Reply
    • Hi Michael, you'll get this error if you place the CSS code somewhere which doesn't accept full CSS code, such as the "Custom CSS" boxes in the module settings (despite the name, they actually only accept CSS properties and then use that to generate full CSS). Try placing the code here instead:

      Divi > Theme Options > General > Custom CSS

      That box allows full CSS and the code should work there without error. Let me know if you have any further issues with it. Thanks!

      Reply
      • That didn't space out the menu items.

        Reply
        • This works, however:

          .et_pb_menu–without-logo .et_pb_menu__menu>nav>ul>li>a {
          padding-right: 25px; !important;
          }

          Reply
          • Hey Michael, thanks for sharing and I'm glad you were able to get it working. I think the reason it won't have been working for you is that the CSS in the post above is designed to work with the default Divi header, whereas I'm guessing from your working code that you're using the menu module. If you ever need it, I have a separate post on changing the spacing in the menu module:

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

            Cheers!

  3. Thank you very much with the vertical option!! :-)

    Reply
    • You're welcome, Alex!

      Reply
  4. 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
  5. 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
  6. I really love divi theme on my site. It's really awesome!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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