Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
One major issue I have with Divi is the fact that if you are using the centered inline logo option, and you do not have an even number of menu items with a roughly even number of characters, then it always pushes to logo slightly to the right. I can get a little obsessive about alignment and spacing so for me, the logo should always sit directly in the center and the menu items should fit around it.
The main problem with having the logo sit truly central is there is currently no way to ‘float’ something in the center with CSS. Why? you may ask, I completely agree, it doesn’t make sense. Until you really think about. I read an explanation once of why there is no ‘float: center;’ option in CSS and I will do my best to explain that to you now…
Imagine you are lying on an inflatable lilo in a swimming pool, you can paddle over and ‘float: left;’ by holding onto the left side of the pool, and then you can paddle over and ‘float: right;’ by holding onto the right side of the pool. Make sense? Good. So now you want to ‘float: center;’, so you paddle to the middle of the pool and sit for a minute, but guess what? Yep, you got it: nothing to hold onto. So what happens? you just drift about aimlessly pushed left and right by whatever is happening at either side of you. The same principles apply when you try to centrally float an element with CSS.
All is not lost though, at least not with the Divi centered inline logo option! The way we are going to fix this is by using our old friend, the ‘negative margin’.
So let’s get cooking!
Cooking time
This should take you around 5 minutes max.
Preparation
Let’s make sure we have our logo set up correctly, so navigate to Divi > Theme Customiser > Header & Navigation > Header Format and select the Centered Inline Logo option from the drop down box. Don’t forget to Save & Publish.
Method
OK so now we have our menu set up, but this is how it looks, my menu items are not even so the logo is being pushed to the right.
All we have to do to fix this is to add a negative margin to the navigation. So copy and paste this CSS snippet into your Child Theme Stylesheet or the Divi epanel custom CSS box and adjust the negative left margin pixel value until you get your logo central.
.et_header_style_split #top-menu-nav {
margin-left: -80px;
}
-80px works for me but you will need to change this as it will depend on the size of your logo, the number of menu items and the amount of characters in those menu items.
A quick way to check the logo is central is to view it on a page where you have two columns at the top. You can see from the image below my logo is now pretty central.
And that’s it. Enjoy!.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
halo michelle, i am a newbie of divi. i have downloaded 25 awesome free civi resources. what are these ? lay out or plugin ? And how to use it?
Check the read me files in the zip packages and you will be directed to instructions
Sorry I forgot the link! https://michaelhyatt.com/work-with-me
Yes completely possible. Take a look at this tutorial for the overlap effect https://quiroz.co/the-overlapping-divi-logo/
Just make your logo have a circular white background
Awesome tutorial and thank you!
Wondering, would this technique work to create something like the following? I’m attempting to create that Logo look but not sure if this here is my answer. Ty!
Thank you! This worked beautifully on desktop, but alas – on mobile when you’re only dealing with a hamburger, you don’t need that shift. Any thoughts on how I can disable for mobile? I think that might put it back to center for me.
Just wrap your code in a media query:
@media all and (min-width: 981px) {
styles
}
Thanks Michelle. But darn – still not working. http://www.somethingsawry.com (ha – aptly named for my problem!) Looks fabulous on desktop – not on mobile though. Logo still off-center.
Try this Mary
@media all and (max-width: 980px) {
.et_header_style_split #logo {
margin-left: -65px;
}
}
Yay! That worked. Thanks SO much!!
Does this fix the weird shifting of the logo on Safari?
When you check my site on every browser it’s fine, but on Safari, after the first scroll, the logo shifts to cover the menu item to the right.
Sorry i don’t use Mac so cannot advise on that
Thanks for this snack, Michelle! Works fine.
Do u know how this header works? h o b a n i.com/ ?
All in the same block, logo and menus itens. I can´t reproduce in divi. Can u help me?
Thank you!
You can get that look with the default navigation setting int he customiser rather than the centered inline option and this tutorial: https://divisoup.com/how-to-create-slim-horizontal-submenus/
Thank you Michelle! You’re the best!
Welcome Dawn
You are awesome
thx
Thanks Lasse you are awesome too
Thank you Michelle, it worked perfectly with an increased px! Happy days!
Great Rhian
Hi Michelle:
One suggestion would be to use relative measurements so that the centering adjustment has the best chance of working across different displays. Using a fixed measurement like px might be problematic as the screen got smaller.
Hey Patrick, funnily enough that is what I did first but with relative measurements it throws the logo out again, with px it stays put
Thank you so much, Michelle! I quit using the centered inline for that exact reason. You’re so awesome to share your hard-earned knowledge with us!
That is so lovely of you to say, thank you