How to 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!

7
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of

Hello Lee, thank you very much for your advice and code – it worked really well for me. Much appreciated.
Tim

Thank you very much!

Hi Lee,
I have tried this code and another one I found on the dynamik forum but my logo stays on the left. Unfortunately I’m on local. But can you think of something I am missing?? I cannot see why it’s nor working since I’m at the beginning of my customizations and haven’t touch something else elsewhere..

I have tried each of these and am not having any luck centering my logo. I have the Genesis sample theme. I’ve posted this in the Studio Press forums, but I haven’t had any responses. Any help is greatly appreciated! I’m a newbie, so I need stuff spelled out, fyi.
Thanks!
http://www.itallmattersmom.com

Thanks so much…

Using float and text-align center, or background position top center, was working for the site title / logo… but wasn’t for the header right widget area.

Your update section’s CSS did the trick for the widget. Again, thanks so much!

I found your post looking to do a split centered menu logo for this site I’m developing http://netx.get2it.net/ (using news pro) like the modern studio pro theme – https://my.studiopress.com/themes/modern-studio/#demo-full – I’ve read and tried a few suggestions I found in the studio press community, however, it was not viable…suggestions? TIA!

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!