Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Split Divi Menu Items To The Left Or Right

Nelson Miller Profile Orange
In this tutorial I will show you how to split and align certain Divi Menu module items to the left or right.

▶️ Please watch the video above to get all the exciting details! 👆

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. 

Categories: Divi Menu Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

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

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

20 Comments

Comments By Others

  1. Andrés

    Is it possible to do this with the default Divi menu? I don’t know how to do it or what css classes to use… 🙁

    Reply
  2. Lana

    Hello,

    I am trying to have the nav so the logo is to the left, then I tried to use this tutorial to split 2 menu items to be on the right but I need the other menu items to be centered on the page. When I use this, it splits the nav to left of screen and right of screen. Is there a way to have the nav like I mentioned above?

    Reply
  3. Lana

    How can I create this but with the main nav is centered and the one menu items is to the right?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Lana!

      Please change the nth-child number in the code with number of menu items. Example: the number of menu items are 10, then the code will be nth-child(10) to have one item on the right.

      Let me know how it goes!

      Reply
  4. Stacey Harris

    Great tutorial — thanks! Also works with a fullwidth menu module (which surprised me!). It would be great if one of the split sections could be a different type size (I have a client who currently would love that.) I tried adding a stylesheet to the menu items I wanted to change in the menu settings, but that didn’t change the ones I wanted to change. I also just tried adding the additional style to your code (no luck there either.) Any ideas? Thanks for all of your wonderful blog posts. They are fantastic.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Stacey!

      I’m afraid I did not able to understand the requirement correctly. If you need to change the number of that menu item from where you want to push the Menu items for any other Menu module, then you can add another custom class in it and add the code again using that class.

      If I’m missing the issue here, then please share some more details with page URL.

      Reply
  5. Mike

    Can I do that in the main menu?

    Reply
  6. Alissa

    I’m using a split menu for a site I’m working on and for some reason it’s working like a charm everywhere except my product pages. When I go to a product page my menu becomes left-aligned again. This is for all the product pages, every other page looks fine. Any idea why this would be happening?

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Alissa!

      Please add !important in each property of the code. If it does not help, can you please share the URL of the product page?

      Reply
  7. Leo

    Hey will you be able to make a tutorial on how to make the same navigation layout as the one on this site please.
    https://xneelo.co.za/

    Reply
  8. Renny sherman

    I found what I was doing wrong. Thanks for your help!

    Reply
  9. Renny sherman

    I’m trying to split a long menu from the seventh item on and I’m having a problem with the inserted CSS it says “Expected a ‘function’ or ‘indent’ after the colon on line 12

    .pa-split-menu .et_pb_menu__menu > nav > ul li:7th-child(7) {
    margin-left: auto;

    Any ideas?

    Thank you!
    Renny

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Renny,
      The snippet you shared has a few issues with 7th and missing bracket, so maybe try this:
      .pa-split-menu .et_pb_menu__menu > nav > ul li:nth-child(7) {
      margin-left: auto;
      }

      Reply
      • Renny sherman

        Should I change nth to 7th? That’s where I get the error.

  10. Rick

    Hey Nelson, I tried this but I had no luck. My initial code I used was I wanted to move my menu to the left near my Logo and then align two menu links to the right but didn’t work for me. Maybe I’m doing something wrong? Let me know P.S. Its a site I’m in the process of redesigning so I’ll remove it from maintenance mode.

    Reply
    • Hemant Gaba <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hey Rick,

      Please remove the website from the maintenance and comment again and I’ll check the issue immediately.

      Reply

Submit a Comment

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

Recent Posts

Shopping cart0
There are no products in the cart!
You may be interested in…
$19.00$22.50

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$16.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$19.00$24.00

Select options This product has multiple variants. The options may be chosen on the product page

$20.50$24.00

Select options This product has multiple variants. The options may be chosen on the product page

Graphic showcasing Divi Assistant features and toolset.
From: $69.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Divi Search Helper Plugin By Pee Aye Creative
From: $29.00 / year

Select options This product has multiple variants. The options may be chosen on the product page

Continue shopping
0