How to center a logo in your WordPress theme

Sometimes what seems to be a trivial task can end up being a huge undertaking. Even with the countless customization options available for your WordPress website, small edits can mean a lot of work.

One for instance, which pops up a lot in our support requests, is centering a logo. A majority of our themes are styled with the traditional left alignment found in many of today’s traditional website layouts. In the instance one of our customer’s wants to center a logo and depending on the theme they’ve purchased from us, we have to direct them to edit their style.css file. This can be daunting and scary for everyone involved.

Let’s explore this common request and look at the options you have, even if you’re not a Slocum Theme customer.

How to center a logo in WordPress

For starters, we’ll get our hands dirty with some of the coding choices available. First, let’s look at a simple way to inspect the code of your theme to identify where the logo is located:

Use your browser’s inspection tool

1. If you’re using the Chrome browser, right-click on your logo and select inspect element.
2. If you’re not familiar with this, you’re looking at lines of CSS code which make up your theme’s style.css file. In the image above, you can see that in our theme Symphony, the logo image is located in the class, .logo-box.
3. If you have the experience, you can edit the style.css of your theme to make the alignment changes necessary to center the logo — if not, we’ll explore some other options. Read on!

Pro tip: It’s important to realize that every theme is different and won’t have the same CSS classes as above in your theme, so be sure to make note of yours in particular. 

Pro tip #2: If you’re new to writing CSS, HTML Dog provides a great beginner tutorial.

Making the changes to style.css

Again, because every theme is different, we won’t get into writing the lines of CSS for centering a logo in this post but we will point you in the direction(s) that might help you get it worked out on your own:

Testing in the browser’s developers tools.

The good news is, we can test in the browser developer tools first!

While you’re in the developer tools editor, you can write and modify the CSS that you’re inspecting. Meaning, you can make changes as if you’re editing the code on your server, but just temporarily. This is a great way to test and find the CSS that is right for your theme, before actually committing those changes to your style.css file.

Write the changes to your style.css

Once you’ve determined the CSS you need to write and center your logo, you need to save it to style.css. To remain true to keeping this article beginner friendly, here are a few points to consider:

1. Login to your WordPress dashboard and browse to Appearance > Editor and find the lines of code in your style.css file to replace.
2. This isn’t the only way to edit your style.css. Depending on the access you have to your theme or web hosting environment, it may vary. You may need to SFTP or SSH into your web host to make these changes. If you don’t know how to do this consult with your web host or find a professional WordPress developer to help you.
3. Always make a backup before you make any modifications!
4. It’s also important have a child theme running before making visual changes to your website. If you make changes directly to the parent theme and then the theme receives an update from the author, your changes will be overwritten. Learn more about making a child theme.

Why is style.css so important?

If you haven’t caught on by now, style.css is a very important file. Consider it the heartbeat to your theme’s overall look and feel. More advanced developers will recognize that there are additional files responsible for your theme’s design, but style.css surely holds the most.

Some methods for editing syle.css, like a plugin, may actually create it’s own style.css which overwrites your master style.css. Why do I bring this up? Because as you begin your journey into editing the styles of your theme (or many other themes) learning which style.css to edit is important. Here’s a guide from WordPress.org that might help you find the correct style sheet.

On that note, if you do feel a bit squeamish editing your theme’s (or child theme’s) master style.css give Jetpack’s style editor a spin.

Isn’t there an easier way to center my logo?

For those of you looking for a way to center a logo without having to write any code, check to see if your theme has any theme options for doing this type of layout change. They may be located in the dashboard under Appearances > Theme options or by visiting Appearances > Customize.  You should also check your theme’s documentation or check with your theme author about availability.

In either case, exhaust your options before getting neck deep in code you’re not familiar with. Now let’s take a look at our theme Symphony and the logo centering options we have baked into it’s options:

Centering your logo in Symphony theme

The following options are available by visiting Appearances > Customize > Main Header > Alignment

• Traditional (aligned left)
• Centered (which also centers a navigation menu if you have one loaded)
• Flipped (right aligned)
• Navigation below (which keeps the logo to the left, but menu below it.)

As you can see in our screenshot above, simply selecting the Centered option has aligned our logo in the center of our header along with the navigation below it. Very easy and no coding necessary!

That’s a wrap for today’s tutorial, we hope you liked it and stay subscribed for more. If you have any questions about this post or building a website with the Symphony theme, ask us below.