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:
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
.et_pb_menu.menu-module-reduced-padding .et-menu.nav > li {
padding-left: 30px !important;
padding-right: 30px !important;
}
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!
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
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.
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!