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
In your browser, right-click and you’ll see something like ‘Inspect’ or ‘Inspect Element’.
Step 2
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
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
Open the theme Customizer and then click on Additional CSS.
Step 5
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
Then click on Site Identity.
Step 3
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
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
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
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
In your WordPress Dashboard, click on the theme Customizer.
Step 2
Then click on Layout inside the customizer.
Step 3
Then click on Header.
Step 4
Then click on Site Identity.
Step 5
You’ll then see the Logo settings. Upload your logo, choose your Logo width and uncheck the Display Site Title box.
Step 6
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
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
In the WordPress Dashboard, click on Theme Options under the Divi settings.
Step 2
You’ll then see the Divi settings where you can upload your logo. Don’t forget to save your changes.
Step 3
Then click on ‘Theme Customizer’.
Step 4
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
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.
