Code by Day | Explore By Weekend

How To Move The Divi Menu To The Left And Logo To The Right Tutorial by Pee Aye Creative

How To Move The Divi Menu To The Left And Logo To The Right

In this tutorial, we will show you how to move the Divi menu logo to the right and move the menu navigation to the left.

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.

move the Divi logo to 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.

move the Divi hamburger menu to the left on mobile

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!

move the default Divi header menu logo to the right on desktop
35
Last updated Mar 23, 2021 @ 2:55 am

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!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart