If you’ve uploaded your logo in WordPress but it looks too big or too small, then read on.
Because in this post, you’ll learn 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 started.
Table of Contents
Change the WordPress Logo Size Even If Your Theme Doesn’t Allow It
If you’re using a theme like Divi, GeneratePress, Astra or any others that let you change the logo size in the customizer, then congrats!
Scroll below for a tutorial on all these themes.
However, if you’ve already checked your settings and your theme doesn’t have the option, here’s how to change the logo size using CSS.
Don’t worry, it’s easy if you follow my steps below.
Using CSS to Change the WordPress Logo Size
CSS stands for Cascading Style Sheet. Basically, it’s a language which tells the browser how to style different elements on the page.
Let’s use CSS to change the style of the logo size.
Step 1: Inspect the element
Right-click anywhere in your browser and you’ll see something like ‘Inspect’ or ‘Inspect Element’. Click on that to view the source code of the page:
Step 2: Click the element highlighter
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: Note down the logo element
Hover your mouse over the logo and note the text that pops up:
This is the CSS class you’ll need to target to change the size of the logo.
Step 4: Open the theme customizer
Then open the theme Customizer and click on Additional CSS:
Step 5: Add some CSS code
Now add the following CSS code to adjust the size of your logo:
.my-css-class img {
max-height: 65px !important;
}
Replace .my-css-class with your own CSS class you found in the element highlighter.
As you can see in the above picture, my CSS class is .site-title-wrapper but yours could be different depending on the theme you’re using.
Once you’ve added the code, see the logo change in size. You can adjust the max-height value to get the desired size of your logo.
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 the GeneratePress logo size.
Step 1: Open the theme customizer
In your WordPress Dashboard, click on the theme Customizer:
Step 2: Click on Site Identity
Open the option Site Identity inside the customizer:
Step 3: Edit these settings
Hide the site title, upload your logo and then use the slider to select your logo width:
Step 4: You can use the slider or type it in
I’ve chosen my logo size to be 250px, but you can decide on whatever suits your website best:
Step 5: Spacing options
Here’s an example of what my logo looks like. If you have GeneratePress Pro, then you will also have spacing options above and below the logo:
Step 6: Click Publish
Click on Publish and you’re done changing the logo size in GeneratePress:
How to Change the WordPress Logo Size in Astra
Here’s how to change the Astra theme logo size.
Step 1: Click the customizer
In your WordPress Dashboard, click on the theme Customizer:
Step 2: Click on Layout
Then click on Layout inside the customizer:
Step 3: Click on Header
Then click on Header:
Step 4: Then click Site Identity
And click Site Identity to access the logo settings in Astra:
Step 5: Edit these options
You’ll then see the Logo settings. Upload your logo, choose your Logo width and uncheck the Display Site Title box:
Step 6: Logo width slider in Astra
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: That’s it!
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, here’s how to change the Divi theme logo size.
Step 1: Click Theme Options
In the WordPress Dashboard, click on Theme Options under the Divi settings:
Step 2: Upload your logo
You’ll then see the Divi settings where you can upload your logo. Don’t forget to save your changes:
Step 3: Go to the Theme Customizer
Then click on “Theme Customizer”:
Step 4
Then, click on ‘Header and Navigation’ > ‘Primary Menu Bar’ to view the Divi logo settings:
This is where Divi is slightly different.
First 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: And you’re done!
Here’s what my logo looks like with these settings. Click on Publish to save your changes:
Conclusion
As you can see, it’s easy to change the logo size for wordpress and most themes achieve this in a similar way.
You can also use CSS code if your theme doesn’t have the settings to change the logo size in the theme customizer.
Read Next: How to Edit Copyright Text in WordPress
Photo by UX Indonesia on Unsplash