Center Logo and Menu in Genesis Sample 2.6

Amethyst Website Design –

A preferred choice for web site headers is to heart brand and navigation menu. This is used for lots of female and images web sites, however I’ve additionally seen small enterprise web sites use a centered brand.

Genesis 2.6 makes use of the WordPress customizer to make including totally different measurement logos very easy — no code required! And for very huge logos, the theme will mechanically heart the brand and menu.

But in case you have a round or sq. brand, you’ll need to add a little bit of CSS to get the brand and menu centered.

Add Your Logo Image

I’m utilizing a brand that’s 500px by 500px, however I need it to point out as 250px within the theme header. The brand is twice as massive as wanted, so it will likely be good and sharp on retina screens.
To add the brand, begin in your WordPress Dashboard:

1. Go to Appearance > Customize and choose “Site Identity”.
2. Change the “Logo Width” to be the width that you really want for the brand to seem, so for this brand, it’s half the 500px width, so 250. You simply need to add the quantity.
3. Next, click on the “Select Logo” button on the high, and select the brand out of your pc (or Media Library, if you happen to already uploaded it.) Be certain to click on the “Skip Cropping” button!
4. Then click on the blue Publish button on the high.

Where so as to add the CSS

You can edit the themes output file, however you then’ll have a multitude if you happen to ever change your brand measurement. It’s a lot less complicated to make use of CSS.

I’m additionally recommending that you just add the CSS utilizing the WordPress Customizer. From your WordPress Dashboard, click on:
Appearance > Customize after which the “Additional CSS”.

You can even add this CSS on the very backside of the theme model.css file, if you happen to choose, and know the way.

All the CSS is in this GitHub Gist.

Center Logo and Menu on Both Large and Small Screens
Large screens will appear like the picture on the high of this publish; small screens will appear like the picture under.

To heart the brand and menu on each massive screens and small, add the next CSS.

/* Center brand and menu on massive 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: zero auto;
	text-align: heart;
}

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

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

Center Logo and Menu on Only Large Screens
Large screens will appear like the picture on the high of this publish; small screens will appear like the picture under.

If you need to the brand and menu to be centered for giant screens and side-by-side for small, use this CSS as an alternative of the above.

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

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

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

Header Not Sticky

For a taller brand, Genesis 2.6 will mechanically flip off the sticky header, however you may modify this your self too.
The CSS so as to add is:

/* No mounted header. */
.site-header {
	place: static;
}

Let me know within the feedback the way it goes for you!