• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Get 4 months free on a WP Engine shared annual plan to celebrate Web Week. CODE: WEBWEEK2020

Ginger Coolidge

Delivering WordPress Solutions

  • Home
  • Solutions
  • Blog
  • Gear
  • About
  • Contact

Center Header Logo Image in Genesis Child Theme

Published: April 2, 2017 - Updated: October 24, 2020

cactus succulent

Today a quick little tutorial on how to center the logo image in the header of the *Utility Pro theme. I had this request recently in support and it turned out to be much easier than originally thought.

Note: While this tutorial is for the Utility Pro theme, it will likely apply to any *Genesis child theme that is not using the genesis-custom-header function. This means if you go to Genesis => Theme Settings you’ll see a Header section where you can select Dynamic text (default) or Image logo.

Display the Logo

First, you’ll want to have a look at this section in the Utility Pro theme setup documentation on how to get a logo to display in your site:

Can I Use An Image Logo ?

Make sure your logo is showing in the upper-left before you continue. All good? Ok!

Get Centered

Next, we will make a single CSS change to move the logo from it’s default location of left on larger views (desktop), to the middle of the header area. Remember, Utility Pro is a mobile-first so you want to look for the section for larger screens.   In the standard version it will look like this:


@media screen and (min-width: 1023px) {
  .header-image .site-title > a {
      background-position: left; 
  }
}

If you do not have any other styling in that section you can remove it entirely or just remove the background-position entry. That is it! Your image logo should now appear in the middle of the header.

 

*There are affiliate links sprinkled throughout this post. Have a look at my Toolbox page to learn more.

Filed Under: Tutorials, WordPress Tagged With: Genesis, logo, Utility Pro

About Ginger Coolidge

I'm here to introduce you to quality, clean WordPress solutions with the Genesis Framework that can serve you for the long haul. If you're not sure where to start, you're in the right place!   About Me

Reader Interactions

Share your thoughts... Cancel reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Primary Sidebar

Genesis Pro

30% Off First Year with Coupon Code: SP3FREE

Essence Pro

Mai Pro Law

Mai Pro Law theme mobile screenshot

Mai Pro Lifestyle

Mai Pro Lifestyle theme mobile screenshot

Keep In Touch

You betcha! I would be tickled pink send you my latest posts.

*I use affiliate links sprinkled throughout this site. If your click results in a sale, at no cost to you, I may earn a small commission.
To see a full list, go here to learn more.


© 2021 · All Rights Reserved · GSC Solutions LLC · Proudly Powered by WordPress & the Genesis Framework