Increase Space Between Items in Divi Menu Module

| menu module

The Divi menu module lets you place menu links anywhere within your page layout. However, it doesn't currently include an option to adjust the spacing between the menu links. Here's how you can.

First, here's an example of the menu module with the default spacing (=22px):

Set the Menu Module Link Spacing using Divi Booster

Divi Booster contains an option for adjusting the spacing of links in the menu module.

You'll find the option to change this in the menu module settings at:

Menu Settings > Design > Layout > Link Spacing

Like so:

Here's the result:

The option is available in Divi Booster v3.6.0 onwards. Note that the change doesn't show up in the visual builder preview – but it will on the front-end.

Set the Menu Module Link Spacing using CSS

You can alternatively use the following CSS to set the spacing between links in the menu module.

.et_pb_menu .et-menu.nav > li  {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

Related Post: Adding CSS to the Divi Theme

To apply the spacing to only some menu modules, give your module a CSS class of "menu-module-reduced-padding" in the menu module settings ("Menu Settings > Advanced > CSS ID & Classes > CSS Class"), then add this CSS to your site:

.et_pb_menu.menu-module-reduced-padding .et-menu.nav > li  {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

You can apply the same class to multiple menu modules if you need to.

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

More Divi Tips

Divi Booster

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

Download Divi Booster

4 Comments

Maria Fernanda Restrepo on November 10, 2023 at 11:55 pm

Hello,
Thanks for sharing.
I tried using the code but my menu is being replaced for another menu I have.
Do you have any info why this is happening? Any help is really appreciated.
Thank you! – Have a great day!
Reply
- dan on November 13, 2023 at 3:00 am
  
  Hi Maria, the code shouldn't be able to affect which menu is applied – it's CSS code which is applied in the browser after the page has been generated (and the menu loaded). I can see that the CSS seems to be applying correctly in your page, so I suspect something else is causing your issue with the menus. The menus on that page look like they are added using two Divi menu modules within the header and footer of the theme builder template in use on the page, so I'd first of all check that the correct menu is still selected within these menu modules. If the correct menus are set in the menu module settings, but the wrong menu is showing on the front end, try clearing any caches and refreshing the page. If that still doesn't solve it, let me know and we'll take it from them. Thanks
  Reply
John on March 13, 2022 at 9:50 pm

Any thoughts on how I can reduce the default link spacing, rather than add to the default spacing, in a specific Divi menu module rather than across all menu modules on my site? My university does not allow use of Divi Booster. Thanks for any help.
Reply
- dan on March 14, 2022 at 7:38 pm
  Hey John,
  
  First, give your module a CSS class of "menu-module-reduced-padding" in the menu module settings ("Menu Settings > Advanced > CSS ID & Classes > CSS Class").
  
  Then add this CSS into the "Divi > Theme Options > General > Custom CSS" box:
  
  .et_pb_menu.menu-module-reduced-padding .et-menu.nav > li { padding-left: 4px !important; padding-right: 4px !important; }
  
  The default padding is 11px each side, so anything less than that should reduce it.
  
  You can apply the same class to multiple menu modules if you need to.
  
  Hope that helps!
  Reply