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

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

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

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. 

Last updated Aug 31, 2021 @ 9:26 am


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

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.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

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

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

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

Shop The Sale Now!

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


  1. 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.

    • Hemant Gaba

      Hey Rick,

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

  2. 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!

    • Nelson Lee Miller (aka The Divi Teacher)

      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;

      • Renny sherman

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

  3. Renny sherman

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

  4. 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.

  5. 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?

    • Hemant Gaba

      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?

  6. Mike

    Can I do that in the main menu?

  7. 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.

    • Hemant Gaba

      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.

  8. Lana

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

    • Hemant Gaba

      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!

  9. Lana


    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?

    • Hemant Gaba

      Can you please share the URL of the site to investigate further?

  10. 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… 🙁


Submit a Comment

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

Recent Posts


Your Cart