Divi Standard Menu
Change Menu Item Spacing with Divi Booster
Divi Booster adds an option to set the spacing between items in the default menu. You'll find it on the Divi Booster settings page, at:
Divi > Divi Booster > Header > Main Header > Space between menu items
Like so:
Change Menu Item Spacing with CSS
If you don't have Divi Booster, you can manually increase or decrease the spacing between the menu items in the Divi Theme's main navigation menu, using the following CSS:
ul#top-menu > li:not(:last-child) {
padding-right: 50px !important;
}
#et_top_search {
margin-left: 50px !important;
}
Related Post: Adding CSS to the Divi Theme
Vertical Menu
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;
}
}
Related Post: Adding CSS to the Divi Theme
Menu Module
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. This is covered in my post on changing the spacing between menu module links.
hi,
how to change the spacing between the primary and secondary menu please ?
Hi dobermann,
If you want to actually have a gap between the primary and secondary menu, you should be able to do so with this CSS:
#main-header { margin-top: 40px; }
You can add it into the "Divi > Theme Options > General > Custom CSS" box. Note that the site background / page content will be visible within this gap.
If you just want to make the secondary header taller, pushing the primary menu down, you can use this instead:
#top-header { padding-bottom: 40px; }
Or to add the extra space to the top of the primary menu, use this:
#main-header { padding-top: 40px; }
I hope one of these helps, but if not or I've misunderstood what you need, please let me know (with a link to the site you're working on, if possible).
Thanks!
Dan
I get an error now, "expected COLON" after first line and "Unexptected token '}'" after last one.
Hi Michael, you'll get this error if you place the CSS code somewhere which doesn't accept full CSS code, such as the "Custom CSS" boxes in the module settings (despite the name, they actually only accept CSS properties and then use that to generate full CSS). Try placing the code here instead:
Divi > Theme Options > General > Custom CSS
That box allows full CSS and the code should work there without error. Let me know if you have any further issues with it. Thanks!
That didn't space out the menu items.
This works, however:
.et_pb_menu–without-logo .et_pb_menu__menu>nav>ul>li>a {
padding-right: 25px; !important;
}
Hey Michael, thanks for sharing and I'm glad you were able to get it working. I think the reason it won't have been working for you is that the CSS in the post above is designed to work with the default Divi header, whereas I'm guessing from your working code that you're using the menu module. If you ever need it, I have a separate post on changing the spacing in the menu module:
https://divibooster.com/change-the-spacing-between-menu-module-links/
Cheers!
Thank you very much with the vertical option!! :-)
You're welcome, Alex!
Hi
I did what you've mentioned to add space between the menu items and it did not work :-((
Thanks
Vladimir
Hey Vladimir, the menu in your linked site is using a custom Theme Builder header. In that case, you need to use the advice in this post:
https://divibooster.com/change-the-spacing-between-menu-module-links/
I just checked the CSS from that post and it seems to work on your site.
Also, note that these tips are for adjusting the horizontal distance between the main items in the menu. If you're looking for a way to adjust the vertical space between, for example, items in the drop-down menus, let me know.
I hope that helps,
Dan
Hi. I have a question, when you set the logo in the menu settings, how can I align the logo to the left and the menu itself to the right? some kind of "space-between" css attr.
Regards!
Hey Luis, is there any chance you're able to share a link to the site / page you're working on so that I can take a look at how you currently have it set up? Thanks!
I really love divi theme on my site. It's really awesome!