• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials Themes

Center Logo and Menu in Genesis Sample 2.6

May 15, 2018 Updated on November 25, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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!

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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!

    Reply
    • Marcy Diaz says

      Thanks, Marcus! I’m glad to see you here!

      Reply
  2. Ryszard Moron says

    finally a solution that works
    thanks Marcy

    Reply
  3. Petri says

    Thanks a lot Marcy, it works like a charm!

    Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!