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

2 Comments

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