Center the Genesis Theme Logo Image

The Genesis theme usually places the header image to the left side of the page. You can center it with a quick snippet of CSS.

Center your theme logo header image by putting this CSS in your child theme’s style.css file:

/** Center the header image */
#header {
  background-position: top center;
}

If you want to place the CSS in the Genesis settings panel go to Genesis > Theme Settings and add the CSS in the box below where the text Enter scripts or code you would like output to wp_head():

You would add the CSS like so:

<style type="text/css">
/** Center the header image */
#header {
  background-position: top center;
}
</style>

Put the CSS in either the style.css file or the theme settings but not in both.

Want to turn the title into a clickable link that spans across the full width and height of your header? Add this to your CSS:

.title-area,
.site-title {
    width:100%!important;
}

.site-title a {
    width:100%!important;
}

Update

Some Genesis themes, like Dynamik, require a slightly different method.

First, remove support for the header right widget area by placing this snippet into your child theme’s functions.php file:

//* Remove the header right widget area
unregister_sidebar( 'header-right' );

Next, use the following CSS to center the logo image:

.title-area,
.site-title {
    background-position: center center!important;
    float:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

All done!