Change Space Between Divi Menu Items

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

Change Space Between Divi Menu Items

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.menu-item: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.

Change Space Between Menu Items using CSS (Vertical Menus)

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.

Want get more out of Divi?

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

20 Comments

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

    Reply
    • You're welcome, Faruksadar ­čÖé

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

    Reply
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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 *

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

20 Comments

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

    Reply
    • You're welcome, Faruksadar ­čÖé

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

    Reply
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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 *