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.

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

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
44

Last updated Aug 31, 2021 @ 9:34 am

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.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. Dick Ockers

    I almost gave up… and found this… thank you so very much!

    Reply
  2. Mariola

    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 🙂

    Reply
    • Hemant Gaba

      Hi Mariola,

      Could you please share the URL of the website so that I can investigate further on this?

      Reply
  3. Robin

    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!

    Reply

Submit a Comment

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

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

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

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart