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
49

Last updated Aug 31, 2021 @ 9:34 am

Subscribe

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 :)

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 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
  4. John Miller

    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.

    Reply
  5. Luke Murphy

    Hey, I was just wondering if you knew how to get the burger menu in the left corner and the logo in the centre?

    Reply
    • Hemant Gaba

      Hey Luke,

      I have checked the URL provided and both the things that you asked for are already there on the website.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart