Make Divi Menu Items Equally Spaced And Fill The Entire Width
Here is another great tip to add to our huge collection of Divi Menu module tutorials. This tutorial will let you equally space the width of Divi Menu module links, meaning the menu items will be spaced out horizontally across the entire width of the parent container.
This quick tutorial is only for the Menu module, as I have not tried it nor do I use the default menu anymore. So please note this before asking the comments 🙂
▶️ Please watch the video above to get all the exciting details! 👆
Equally Space Divi Menu Items
This is going to a simple tutorial. You will need a menu module on your website, a custom class in that module, and one of the CSS snippets below.
Add The Custom CSS Class
Note that you will need to add the appropriate CSS class to your menu module in the Advanced tab in the CSS Classes & IDs toggle in the CSS Class input field. So for example, if your menu module is not using the logo, you would write “pa-menu-without-logo.” This is standard practice, as all snippets with custom classes need to match the class in the module.
Set The Menu Text To Justified
In the Divi Menu module, go to the Menu Text toggle and set the sext alignment to Justified.
![equally space Divi menu items equally space Divi menu items](https://www.peeayecreative.com/wp-content/uploads/2020/09/equally-space-Divi-menu-items.png)
Copy And Paste The CSS Snippet
You will need to choose the snippet below that suites your needs, whether you have a logo in the module or not. This will need to be the same as the custom class that you add as well. The snippet will do most of the work of spacing out the Divi menu items.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Without Logo
/*equally space the menu list items*/
.pa-menu-without-logo .et_pb_menu__menu>nav>ul>li {
width: calc(100% / 3);
}
/*make the menu link to fill the menu item width*/
.pa-menu-without-logo .et_pb_menu__menu>nav>ul>li>a {
width: 100%;
text-align: center;
padding: 25px 20px;
background: #f0f3f6;
border: 1px solid #fff;
}
/*override the default menu item padding*/
.pa-menu-without-logo .et-menu>li {
padding-left: 0px;
padding-right: 0px;
}
/*adjust the position of the dropdown arrow*/
.pa-menu-without-logo .menu-item-has-children>a:first-child:after {
position: relative;
}
If you are using the log in the Menu module, there are some differences and we need to have a slightly different snippet. To make it simpler I just made a completely separate snippet for you.
With Logo
/*equally space the menu list items*/
.pa-menu-with-logo .et_pb_menu__menu>nav>ul>li {
width: calc(100% / 3);
}
/*make the menu link to fill the menu item width*/
.pa-menu-with-logo .et_pb_menu__menu>nav>ul>li>a {
width: 100%;
text-align: center;
padding: 25px 20px;
display: inline-block;
background: #f0f3f6;
border: 1px solid #fff;
top: -12px;
}
/*override the default menu item padding*/
.pa-menu-with-logo .et-menu>li {
padding-left: 0px;
padding-right: 0px;
}
/*adjust the dropdown arrow*/
.pa-menu-with-logo .menu-item-has-children>a:first-child:after {
position: relative;
}
Customize
Make sure that you change the number in the CSS to the same number of menu items that you have. In our video we had three, so we used 100% divided by 3. Doing this will equally space out the Divi menu items!
As always, you should be customizing the CSS to your own liking. You could remove the background and border on the links and adjust the padding.
Hello Nelson, first I love your tricks and products and I’m a fan. 🙂
I’m a CSS newbie. The code of this post saved my life, but I miss something. What I must do to customize sub-menu too? Presently, seems to be the default Divi submenu styles still displayed.
Thanks in advance,
We have over 35 tutorials about the menu on our site, so please feel free to browse them. It sounds like this one is what you are looking for: https://www.peeayecreative.com/how-to-style-and-customize-the-divi-menu-module-dropdown-submenu/