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.
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:
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.
Share your thoughts...