Change Space Between Divi Menu Items

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

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

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

26 Comments

  1. Hey Dan,

    I pasted this CSS in the General tab of the Divi options and saved.
    Nothing happened. I read you advise to clear the cache, I did it, even tried on different browsers.
    No effect.
    I'm currently in localhost, using mamp.

    Any ideas?

    Thanks for your help!

    Reply
    • Hey Slaty,

      Quick question – are you using a menu module? The code in this post is designed for (and only works on) the default Divi header. It won't work, for example, on custom headers built in the Theme Builder using the menu module. If that's the case, let me know and I'll try to come up with a solution that will work for you.

      If you're on the default Divi header, can you try the code in the post now? I've just updated it to make it a bit more general. It seems there were some types of menu link that it wasn't taking effect on. Hopefully that helps, but if not, can you let me know what header format you're currently using. Thanks!

      Reply
      • Hi Dan,

        I take this message to ask you the solution using the custom headers built using the menu module in the Theme Builder. 🙂

        Thanks!

        Reply
        • Hey Ed, I've just updated the post with a section on how to adjust the space between menu items in the menu module using CSS. Hope it helps!

          Reply
      • Dan,
        I am trying to do this in a custom header built in the Theme Builder using the menu module. Would you know how to do this in this case, if it's not too much trouble?
        Thanks!

        Reply
        • Hey Ed, I've just updated the post with a section on how to adjust the space between menu items in the menu module using CSS. Hope it helps!

          Reply
  2. Hey thanks man, I'm just finding the solution And I finally get the solution in your article.

    Reply
    • You're welcome, Faruksadar 🙂

      Reply
  3. Hi genius. Could you tell me how to add a border or box to the main menu items? Thank you

    Reply
  4. Hi there! I am trying to add a bigger margin (top and bottom) on both the primary and secondary menu. Can I add that to CSS too? I cannot find settings to change it in Divi.

    Reply
    • Hi Almari,

      You can increase the height of the primary menu using the menu height setting found at "Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Menu Height". It's not technically adjusting the margins – it's really adding padding to the main menu links – but the visual effect should be the same in most cases.

      For the secondary menu, see if this helps: https://divibooster.com/increase-the-height-of-the-secondary-header/

      If either of these doesn't do what you need, let me know. Thanks!

      Reply
  5. Hi Dan, I have a vertical menu. But how can I make my drop-down submenu act vertically as well, and not horizontal?
    Thank you!

    Reply
  6. How would I do this for the logo in the menu bar only? Say I like the buttons the way they are but I would just like them to be further away from the logo which is in the middle.

    Reply
    • Hey John, you should be able to do it by adding some margin to the logo wrapper, like so:

      .centered-inline-logo-wrap { 
          margin-left: 20px !important; 
          margin-right: 20px !important; 
      }
      

      You can add this into the "Divi > Theme Options > General > Custom CSS" box. I hope it helps.

      Reply
  7. To make the spacing variable (so it shrinks on smaller screens before going to the mobile menu view) use vw (viewport width) instead of px.
    I have used 5vw but with more (or fewer) menu-items you can change this to suit.

    ul#top-menu li.menu-item:not(:last-child) {
    padding-right: 5vw !important;
    }
    #et_top_search {
    margin-left: 5vw !important;
    }

    Reply
    • Nice tip! Thanks Torkild 🙂

      Reply
  8. I have a divi site and I am trying to fix the spacing on my submenu for longer titles. I would like the wrapping of my submenu title to have a smaller space. Some of my titles are a little long EX "CSBG Tribal Directory". My Primary menu is also a vertical side menu.

    http://www.csbgtribalta.com/

    Reply
    • Hi Zetter, you should be able to do it with this CSS:

      .sub-menu .menu-item a {
          line-height: 1.5em;
          padding-top: 9px !important;
          padding-bottom: 9px !important;
      }
      

      The "line-height" controls the gap between wrapped lines. However, it also affects the gap between menu items so the padding is added to offset this.

      Also, if you haven't considered it, an alternative would be to increase the width of the menus so that no wrapping occurs, e.g. with:

      .sub-menu, 
      .sub-menu .menu-item, 
      .sub-menu .menu-item a { 
          min-width: 330px; 
      }
      

      You can add either CSS snippet into the "Divi > Theme Options > General > Custom CSS" box.

      Reply
  9. My content on each page hides behind top menu bar, how can I lower it below the menu

    Reply
    • Hi Lewis,

      Divi has a feature where setting a semi (or fully) transparent background color for the header causes the page to be moved up behind the menu bar. It sounds like maybe this is what's going on for you..?

      One way to fix this is to change the header background color back to fully opaque. To do this, go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar, and locate the "Background Color" option. Click on it, and move the rightmost slider (which controls the transparency) all the way to the top. If you now save this and view your site, the page should hopefully be moved lower down. If you like, you can still set a transparent background for the fixed menu, so that the menu bar is transparent when you scroll down.

      Hopefully that makes sense and helps you, but let me know if not.

      Reply
  10. Hello Dan,

    Can I put this code in appearance>editor ?

    Thanks,
    Jesson

    Reply
    • Hi Jesson, while technically you can, it's best not to. The code accessible via the editor can be overwritten if you update Divi and that'll mean your changes get lost. Also, there's a risk of causing your site to break if you make a mistake.

      This post summarizes the best options for adding the CSS code above to Divi:

      https://divibooster.com/adding-css-to-the-divi-theme/

      Reply
  11. I just uploaded and activated the Divi builder and I cannot seem to accomplish this task for spacing out my menu items.

    Zac

    Reply
    • Hi Zac, I've just updated the code above – it seems it now needs to have the !important part to override the padding in the latest version of Divi.

      Also, which theme are you using? The code above is for the Divi Theme only, not themes using the Divi Builder.

      Reply

Submit a Comment

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