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.

logo and menu centered in Genesis 2.6

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.
WordPress Add Logo Do Not Crop

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.

logo and menu centered on small screens in Genesis 2.6

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;
	}
}
logo and menu not centered for small screens in Genesis 2.6

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!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

4 responses to “Center Logo and Menu in Genesis Sample 2.6”

  1. Nice job Marcy!

    We really appreciate your sharing these valuable Genesis tips and how to’s!

    This post is especially useful and a time-saver too!

  2. finally a solution that works
    thanks Marcy

  3. Petri says:

    Thanks a lot Marcy, it works like a charm!

Leave a Reply

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