Center Logo and Menu in Genesis Sample 2.6

Mumbai Web design > Website Design > 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.

logo and menu centered in Genesis 2.6

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.

WordPress Add Logo Do Not Crop

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.
logo and menu centered on small screens in Genesis 2.6

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

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!

 

About the author

I am the author of Mumbai Web company. The purpose of the content is to update you with current things in the world. The blog we post are written from the references of study. We can not guaranty about the information in blogs whether if it works or not. Internet is changing and upgrading everyday so keep reading our blog to be updated.

Related Posts

Leave a Reply

*

code