Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ 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.

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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

25 Comments

Comments By Others

  1. Jonas

    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?

    Reply
    • Hemant Gaba

      Hi Jonas!

      Can you share the URL of the page so that I can check further?

      Reply
  2. Angela Christensen

    If there is existing CSS code, does it matter if this code is added before or after the other code?

    Reply
    • Hemant Gaba

      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.

      Reply
  3. Robin Maxwell

    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. 🙂

    Reply
  4. Al

    Great tutorial. How do put the logo right next to the hamburger button instead of the right side?

    Reply
    • Hemant Gaba

      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?

      Reply
  5. Bill

    Is it also possible to center the logo and have the navigation on the left?

    Reply
  6. Angela

    What if I only want the mobile menu on the left and not the main menu?

    Reply
  7. 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
  8. 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
  9. 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
  10. 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
      • Hemant Gaba

        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!

      • Tosh

        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!

  11. Dick Ockers

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

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart