Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Align Some Menu Items Left Or Right
There are quite a lot of times when I want to split the Divi menu items and align some to the left and some to the right. An example would be when putting a contact button or purchase button on the right. Or maybe I also want to have two items on the right, or any other number. This tutorial is the solution to this need! I will show you how to split the Divi menu items and align them to the left or right.
NOTE: This tutorial is for the Menu Module. I do not recommend continuing to use the default header menu. If you insist, you can check out this other tutorial.
▶️ 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.
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.
Hey Rick,
Please remove the website from the maintenance and comment again and I’ll check the issue immediately.
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
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;
}
Should I change nth to 7th? That’s where I get the error.
I found what I was doing wrong. Thanks for your help!
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/
We don’t do tutorials on styling to match sties, but we hope it helps with splitting the menu items!
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?
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?
Can I do that in the main menu?
Please check the note in the intro.
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.
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.
How can I create this but with the main nav is centered and the one menu items is to the right?
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!
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?
Can you please share the URL of the site to investigate further?
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… 🙁
I believe there is another tutorial out there on the internet for that, I think by Divi Soup.