Be different. Learn how to center the logo and navigation menu

Sometimes you gotta break the mold.

You have to disengage autopilot and take control.

See, the majority of sites on the Internet have the logo left-aligned in the header.

Bbbbbuuuuuuutttt… why?

It’s because most of us consume the Internet like we read a book, when we first look at a website we start by looking at the top left corner of the design and we go on from there.

But what if you wanted to mix it up a bit?

What if you want to center a logo like the new Element design?

For Dynamik Website Builder users there is no option to select that centers the logo automatically, but there is a way around it.

A simple CSS snippet.

NOTE: This CSS is for Genesis + Dynamik Website Builder, it may/may not work with other WP themes but give it a try and tweak the class name if needed.

Here’s all you gotta do, copy and paste the follow CSS snippet into Genesis > Dynamik Custom > CSS

.header-image .site-header .wrap .title-area {
margin: 0 auto;
float: none;
}

Save those change and… BOOM.

Centered logo.

Of course this means that you would not be able to use the header right area for anything (as it would look really weird having a centered logo and something to the right of it).

Let’s keep this center-train rolling.

How about the navigation menu?


Center the Navigation Menu

While pasting in a tiny snippet for the logo works great, the navigation menu is a tiny bit more involved (but still easy).

Let’s start with the easy copy and pasting part first.

Remember the Dynamik Custom > CSS screen that you pasted that last bit of CSS into?

Do it again, but with this CSS snippet:

.sidebar-content .menu-primary {
width: 770px;
margin: 0 auto;
}

.sidebar-sidebar-content .menu-primary {
width: 770px;
margin: 0 auto;
}

.content-sidebar-sidebar .menu-primary {
width: 770px;
margin: 0 auto;
}
.sidebar-content-sidebar .menu-primary {
width: 770px;
margin: 0 auto;
}

.content-sidebar .menu-primary {
width: 770px;
margin: 0 auto;
}

.full-width-content .menu-primary {
width: 770px;
margin: 0 auto;
}

Save those changes and take a look at the front end of your website.

How does it look?

While I can’t see your screen I at least know your navigation menu has moved… but is it centered correctly?

Probably not.

The reason is that the navigation menu CSS needs to have an accurate width in order to center it.

You pasted in CSS code with a width of 770px (see it?), but if your navigation menu is only 400px wide it’s gonna look weird.

So how do we fix this?

We gotta measure your navigation menu.

I use a browser plugin called Page Ruler, it’s a Chrome extension but there are lots of them out there for all the major browsers.

When you install it, a little ruler icon appears in the browser toolbar that looks like this:

When you click it you can drag a ruler out and see the pixel dimension, it looks something like this:

Click to enlarge

Click to enlarge

See where it says 768 in the lower-left corner of the above image?  That’s the width of the navigation menu of Element.

To be honest, that’s actually a tiny bit wider than the navigation menu and I recommend you go 15px or so wider to make sure that the differences in browsers/devices doesn’t make your navigation menu wrap to two lines.

And I like nice round numbers, so I rounded up to 770.

So measure the width of YOUR navigation menu.

How wide is it?

600px?

700px?

815px?

Either way, once you know the width now back to Genesis >Dynamik Custom > CSS and find all the classes for the navigation menu that you pasted in and update the width dimension (770) to whatever your width is on EACH class.

There is a total of SIX instances, so if your menu width is 645px, then your CSS should look like this:

.sidebar-content .menu-primary {
width: 645px;
margin: 0 auto;
}

.sidebar-sidebar-content .menu-primary {
width: 645px;
margin: 0 auto;
}

.content-sidebar-sidebar .menu-primary {
width: 645px;
margin: 0 auto;
}
.sidebar-content-sidebar .menu-primary {
width: 645px;
margin: 0 auto;
}

.content-sidebar .menu-primary {
width: 645px;
margin: 0 auto;
}

.full-width-content .menu-primary {
width: 645px;
margin: 0 auto;
}

The reason why there are 6 classes is for each different combination of page layout you could have (like sidebar then content OR content then double sidebar, etc…).

So centering the logo and menu items are just that easy.

If you’ve done this on a site, share a link in the comments and show off your work.

Your friends,
Amy & Ian

PS: This is why I never go to the mall (and those creepy people that try and give you teriyaki chicken at the food court).

 

More Posts You Might Like

Get notified when we publish new posts and download a free gift right now!

Leave a Comment