Quick Snack: Centering the Centered Inline Logo

by | Jun 18, 2016 | CSS Tips & Tricks, Menus

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: Centering the Centered Inline Logo

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!

ingredients

The Divi Theme from Elegant Themes

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.

Centering the Centered In Logo Tutorial for Divi

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.

Centering the Centered In Logo Tutorial for Divi

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.

Centering the Centered In Logo Tutorial for Divi

 

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!