How To Split Divi Menu Items To The Left Or Right Tutorial by Pee Aye Creative

How To Split Divi Menu Items To The Left Or Right

In this tutorial I will show you how to split and align certain Divi Menu module items to the left or right.
Categories: Tutorials

Join the Divi crowd!

Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle. Place the class “pa-split-menu” in the CSS Class input field.

Add The CSS Snippet To Your Site

Now for the fun part, adding the CSS snippet. This is easy and all you have to do is copy it below and add it to your site.

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.

/*make the width of menu containers 100% wide to make room for the menu items to move*/

.pa-split-menu .et_pb_menu__menu,
.pa-split-menu .et_pb_menu__menu > nav,
.pa-split-menu .et_pb_menu__menu > nav > ul {
	width: 100%;
}


/*push the nth menu item and any other items to the right of it to the right*/

.pa-split-menu .et_pb_menu__menu > nav > ul li:nth-child(4) {
	margin-left: auto;
}


/*this keeps the search and/or cart icons inline*/

.pa-split-menu .et_pb_menu__wrap,
.pa-split-menu .et_pb_menu__wrap .et-menu.nav {
	flex-wrap: nowrap !important;
}

Customize The Alignment

There is one more necessary step. You need to change (n) in the above code with the number of that item from where you want to push the Menu items to the left. For example, if you have 5 menu items like in our video example and you want to align two items to the right side then you will replace the letter “n” with the number “4.” The way this works is by telling that particular menu item to have an automatic margin to the left, and since the the parent container of the menu items is display flex, this works very well. You can play around by changing the number if you want just to get a better idea of how this works. 

19
Last updated Jul 12, 2021 @ 5:44 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

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

Recent Posts

Pin It on Pinterest

0

Your Cart