How To Equally Space The Width Of Divi Menu Module Links Tutorial by Pee Aye Creative

How To Equally Space The Width Of Divi Menu Module Links

In this Divi tutorial I will show you how to equally space out the Divi Menu module item links sizes horizontally across the width of the parent container.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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;
	position: absolute;
	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.

12

Last updated Aug 31, 2021 @ 11:21 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

7 Comments

  1. Scott Ball

    The text in my menu items is not centering, even though it has the text-align: center; code in the Custom CSS. Thoughts?

    Reply
  2. Clarissa

    The Divi Custom CSS area has several categories such as “before”, “main element”, “after” and more. I’ve tried copying the code into various areas but nothing happens each time. Do you have any suggestions on what to do?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Clarissa,
      I’m not sure what you mean. If you are wondering where to put the code, just read the instructions very carefully and you will see I do not say anything about adding it to the module 🙂

      Reply
  3. Dallas

    This was just what I was looking for! My only problem is that one navigation item is longer than the others and so it’s wrapping the text for that one menu item. Not sure how to prevent it from wrapping. (I also have a problem I saw others mention in other forums that I don’t see the option to “justify”) so that could be related. Thanks for any insight.

    Reply
    • Hemant Gaba

      Please try using this CSS property and see if that helps:

      selector{
      white-space: nowrap;
      }

      In the place of selector, you need to write the selector of the Menu Item which is being wrapped.

      Reply
      • Dallas

        That worked, thank you!

        It did make that long navigation item did overlap the search icon but I just deactivated the search icon. If you have an easy way to prevent that, it might also be useful but I have everything I need. Thank you 🙂

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart