Center Logo and Menu in Genesis Sample 2.6

A popular option for website headers is to center logo and navigation menu. This is used for a lot of feminine and photography websites, but I’ve also seen small business websites use a centered logo.

Genesis 2.6 uses the WordPress customizer to make adding different size logos really easy — no code required! And for very wide logos, the theme will automatically center the logo and menu.

But if you have a circular or square logo, you’ll want to add a bit of CSS to get the logo and menu centered.

Add Your Logo Image

I’m using a logo that’s 500px by 500px, but I want it to show as 250px in the theme header. The logo is twice as large as needed, so it will be nice and sharp on retina screens.
To upload the logo, start in your WordPress Dashboard:

1. Go to Appearance > Customize and select “Site Identity”.
2. Change the “Logo Width” to be the width that you want for the logo to appear, so for this logo, it’s half the 500px width, so 250. You just want to add the number.
3. Next, click the “Select Logo” button at the top, and choose the logo from your computer (or Media Library, if you already uploaded it.) Be sure to click the “Skip Cropping” button!
4. Then click the blue Publish button at the top.

Where to add the CSS

You can edit the themes output file, but then you’ll have a mess if you ever change your logo size. It’s much simpler to use CSS.

I’m also recommending that you add the CSS using the WordPress Customizer. From your WordPress Dashboard, click:
Appearance > Customize and then the “Additional CSS”.

You can also add this CSS at the very bottom of the theme style.css file, if you prefer, and know how.

All the CSS is in this GitHub Gist.

Center Logo and Menu on Both Large and Small Screens
Large screens will look like the image at the top of this post; small screens will look like the image below.

To center the logo and menu on both large screens and small, add the following CSS.

/* Center logo and menu on large and small screens. */
.wp-custom-logo .title-area,
.wp-custom-logo .menu-toggle,
.wp-custom-logo .nav-primary {
	float: none;
}

.wp-custom-logo .title-area {
	margin: 0 auto;
	text-align: center;
}

@media only screen and (min-width: 960px) {
	.wp-custom-logo .nav-primary {
		text-align: center;
	}

	.wp-custom-logo .nav-primary .sub-menu {
		text-align: left;
	}
}

Center Logo and Menu on Only Large Screens
Large screens will look like the image at the top of this post; small screens will look like the image below.

If you want to the logo and menu to be centered for large screens and side-by-side for small, use this CSS instead of the above.

/* Center logo and menu on only large screens. */
@media only screen and (min-width: 960px) {
	
	.wp-custom-logo .title-area,
	.wp-custom-logo .nav-primary {
		float: none;
	}

	.wp-custom-logo .title-area {
		margin: 0 auto;
		text-align: center;
	}
	
	.wp-custom-logo .nav-primary {
		text-align: center;
	}

	.wp-custom-logo .nav-primary .sub-menu {
		text-align: left;
	}
}

Header Not Sticky
For a taller logo, Genesis 2.6 will automatically turn off the sticky header, but you can adjust this yourself too.
The CSS to add is:

/* No fixed header. */
.site-header {
	position: static;
}

Let me know in the comments how it goes for you!