Swap The Divi Menu And Logo
If you follow our weekly tutorials you know that we have a huge list of tutorials in the Divi menu series. It seems they never end, and we still have more scheduled! In this tutorial, we will show you how to move the Divi menu logo to the right, and move the menu to the left. This means the hamburger menu will be on the top left corner on mobile, as this may be something you want to do. We hope you enjoy!
▶️ Please watch the video above to get all the exciting details! 👆
Swap The Divi Menu Module Logo And Navigation
The first snippet will work for the Divi Menu module. There are actually several different ways to do this with CSS, but I chose the flex method to keep it as short and simple as possible.
The only thing that you need to do to get this set up is to add the Divi Menu module to your layout, add a logo, and keep the layout set to the normal Left Aligned. Then just move on to the CSS!
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.
/*reverse the menu module logo and navigation*/
.et_pb_menu--style-left_aligned .et_pb_menu_inner_container {
flex-direction: row-reverse;
}
/*move the navigation completely to the left*/
.et_pb_menu--style-left_aligned.et_pb_text_align_center .et_pb_menu__wrap {
justify-content: left;
align-content: center;
}
/*move the logo completely to the right*/
.et_pb_menu--style-left_aligned .et_pb_menu__logo {
margin-right: 0px;
margin-left: 30px;
}That’s really all there is to it. Here is how it now looks with the Divi menu module logo on the right on Desktop.
And keep in mind this works on mobiles as well. So now the Divi Menu module hamburger icon is on the left on Tablet and Phone.
Swap The Default Divi Header Menu Logo And Navigation
The second snippet here will only work for the old default Divi header menu, the one that comes by default if you are not using the Theme Builder. For this method we are using floats to move the items, then adding a few adjustments to the spacing to make it work well.
There is no setup for that that is required other than adding a logo in Divi>Theme Options and having a menu set in Appearance>Menus. From here, just add the CSS like usua in your child theme or Theme Options.
/*move the default header logo to the right*/
#logo {
float: right;
margin-right: 60px;
margin-top: 15px;
}
/*move the default header menu to the left*/
#et-top-navigation {
float: left;
padding-left: 0!important;
}Here is how it looks with the menu on the left and the logo on the right with the default Divi header. I never use the default header ever anymore, so I’m just not into this. Instead, you should check out the Divi Theme Builder!
Hi,
I have done everything as descriped,
“Divi>Theme Options and having a menu set in Appearance>Menus. From here, just add the CSS like usua in your child theme or Theme Options.”
i cleared cache too – nothing works… Howcome?
Hi Jonas!
Can you share the URL of the page so that I can check further?
If there is existing CSS code, does it matter if this code is added before or after the other code?
Hi Angela,
It does not matter where you add CSS in, is your preference for how you organize it.
Sorry. Regarding my comment above, I need to remove the CSS, so I took a screenshot (https://drive.google.com/file/d/1c7q-KjigPATIxDe9kEx1rFU_gN8AmFGB/view?usp=sharing). I am just trying to align the menu and logo left. 🙂
Hi Robin!
We can align the Menu in this case in the Menu module. Please go to Menu module settings > Design > Menu text > Text alignment, and set it to left.
Hi Nelson. Thank you so much for the above. It works GREAT! Unfortunately, I have a client who want a very specific design for his mobile menu and I need to align the entire menu left in a column. If you look at https://probuilthawaii.com/working/ on a tablet, you can see what I mean. Is there anyway to float that menu left? I’ve been trying for hours. Any help would be appreciated, but I understand if you are too busy. Either way, thanks in advance. 🙂
Great tutorial. How do put the logo right next to the hamburger button instead of the right side?
Hi Al!
It can be done with the CSS, but this customization will be different for each menu. Could you please share the URL of the page to check the menu?
Is it also possible to center the logo and have the navigation on the left?
I don’t have any solution for that exact thing, but I am sure it could be done with some code.
What if I only want the mobile menu on the left and not the main menu?
I don’t know what you mean, but it does not sound related to this tutorial.
Hey, I was just wondering if you knew how to get the burger menu in the left corner and the logo in the centre?
Hey Luke,
I have checked the URL provided and both the things that you asked for are already there on the website.
Hmm. I pasted the code into the Custom CSS area in Theme Options, saved it, re-loaded the site and nothing happens. Is there a step I am missing? Does something have to be set in Customizer first? Thanks.
All steps are provided. It could be cache, so be sure to clear that and check in an incognito browswer window.
Hi Nelson. Thanks for all of your awesome content. I refer to your website often. That said, is there anyway to make this work only on mobile? I’ve tried everything I can think of but can’t seem to make it work. THANKS!
Hi Robin,
Sure you can always put any code like this inside a media query to make it only affect specific device sizes. Check our guide on that: https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
Thanks for sharing. How to get the logo in the center and the hambureger icon on the left in the menu module on the phone. I would like to ask for help 🙂
Hi Mariola,
Could you please share the URL of the website so that I can investigate further on this?
Hi Tosh!
Please try the following code for the Menu module customization:
.et_pb_menu__logo-wrap{
width: 100%;
justify-content: center;
}
.et_pb_menu__logo-wrap img{
margin: auto;
}
.et_pb_menu_inner_container{
flex-direction: row-reverse;
}
Let me know how it goes!
Hi, I’m struggling to do the same thing: logo center, hamburger icon left. I would greatly appreciate your help to style just the mobile menu this way. Thank you!
I almost gave up… and found this… thank you so very much!
Nice, glad you found this!