How to Change the WordPress Logo Size in Any Theme

Steve Allen


How to change the wordpress logo size

If you’ve uploaded your logo in WordPress but it looks too big or too small then read on.

Because in this post I’m going to walk you through how to change the WordPress logo size in any WordPress theme.

Even if you’re using a theme that doesn’t let you adjust the logo size within the customizer, this post will help you.

Let’s get straight to it!

Change Your Logo Size if You’re Theme Settings Don’t Allow It

If you’re using a theme like Divi, GeneratePress, Astra or any other theme that let’s you change the logo size in the customizer settings then congrats!

Scroll below for a tutorial on all these themes.

If you’ve already checked your settings and your theme doesn’t allow it then here’s how to change the logo size using CSS. Don’t worry, it’s easy if you follow my steps below.

How to Change the WordPress Logo Size Using CSS

CSS stands for Cascading Style Sheet. Basically, it’s a language which tells the browser how to style different elements on a page.

Let’s use CSS to change the style of the logo size.

Step 1

Step 1 - css inspect element

In your browser, right-click and you’ll see something like ‘Inspect’ or ‘Inspect Element’.

Step 2

Step 2 - css highlight elements

A window will popup with an icon that looks like this. Click on it. This will highlight all the elements on the page when you hover over them with the mouse.

Step 3

Step 3 - css find css class

Hover your mouse over the logo and take note of the text that pops up. This is the CSS class that we need to target to change the size of the logo.

Step 4

Step 4 Open the additional css option

Open the theme Customizer and then click on Additional CSS.

Step 5

Step 5 - enter css snippet

You will need to use your own CSS class as all themes are different. Mine is .site-title-wrapper Replace this text with your own and type img{} directly after it.

Your CSS snippet might look something like this:

.my-css-class img {}

Then inside the closed brackets, type this CSS snippet:

max-height: 65px !important;

Replace the number with the height you want your logo to be.

It should look something like this:

.my-css-class img {
max-height: 65px !important;
}

That’s it. Click on publish and you’re done!

The following tutorials will guide you through changing the logo size in several popular WordPress themes, although it’s a fairly similar process for any theme that allows it inside the Customizer.

How to Change the WordPress Logo Size in GeneratePress

Follow these steps to change your logo size in the GeneratePress theme.

Step 1

In your WordPress Dashboard, click on the theme Customizer.

Step 2

Step 2 - generatepress click site identity

Then click on Site Identity.

Step 3

Step 3 - generatepress logo settings

First make sure you’ve uploaded your logo and tick the ‘Hide site title’, then use the slider to select your logo size where it says ‘Logo Width’.

Step 4

Step 4 - generatepress logo width

You can use the slider of just type in the number you want the logo width to be. I’ve chosen my logo size to be 250px.

Step 5

Step 5 - generatepress logo example

Here’s an example of what my logo looks like. You can also change the spacing above and below the logo if you have the Pro version of GeneratePress.

Step 6

Step 6 - generatepress click publish to save

Click on Publish and you’re done.

How to Change the WordPress Logo Size in Astra

Here’s how to do the same using the Astra theme.

Step 1

Step 1 - all themes click customize

In your WordPress Dashboard, click on the theme Customizer.

Step 2

Step 2 - astra click layout

Then click on Layout inside the customizer.

Step 3

Step 3 - astra click header

Then click on Header.

Step 4

Step 4 - astra click site identity

Then click on Site Identity.

Step 5

Step 5 - astra logo settings

You’ll then see the Logo settings. Upload your logo, choose your Logo width and uncheck the Display Site Title box.

Step 6

Step 6 - astra logo width

You can use the Logo Width slider or type in the number in the box. I’ve set my logo width at 245px.

Step 7

Step 7 - astra logo example

Here’s what my logo looks like after setting the width. Click on Publish to save your changes and you’re done.

How to Change the WordPress Logo Size in Divi

And finally, if you’re using the Divi theme then follow this tutorial to change your logo size.

Step 1

Step 1 - divi click theme options

In the WordPress Dashboard, click on Theme Options under the Divi settings.

Step 2

Step 2 - divi add logo and click save

You’ll then see the Divi settings where you can upload your logo. Don’t forget to save your changes.

Step 3

Step 3 - divi click theme customizer

Then click on ‘Theme Customizer’.

Step 4

Step 4 - divi logo settings

Then you’ll need to click on ‘Header and Navigation’ > ‘Primary Menu Bar’ to view the Divi logo settings. This is where Divi is slightly different. You choose the height of the header by selecting the ‘MENU HEIGHT’, I’ve set mine at 65px and then the ‘LOGO MAX HEIGHT’ is a percentage of the menu height. So if you choose 100 then it’ll be the full height of the header with no space above and below. I’ve set mine at 80% so there’s a little space.

Step 5

Step 5 - divi logo example

Here’s what my logo looks like with these settings. Click on Publish to save your changes.

Wrapping Up

I hope this tutorial has helped! As you can see there are many ways you can change the logo size, depending on which approach you take or which theme you’re using.

About the Author, Steve Allen

Steve is a full time web developer and niche site builder on a journey of financial independence. Through video tutorials and written content, his goal is to help entrepreneurs become more confident with WordPress to create the ultimate business website.

Leave a Comment

Special CLOUDWAYS Offer

-20%

off your first 2 months - Use Promo Code: CSB20