How to Change the WordPress Logo Size in Any Theme

Steve Allen

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: Inspect the element

1.css inspect 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

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: Take note of the logo element

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: Open the theme customizer

4.css click additional css

Then open the theme Customizer and then click on Additional CSS.

Step 5: Add some CSS code

5.css enter css snippet

Now add the following CSS code to adjust the size of your logo:

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

And replace .my-css-class with your own CSS class that 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, you should see the logo change 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

1.all themes click customize

In your WordPress Dashboard, click on the theme Customizer.

Step 2: Click on Site Identity

Step 2 - generatepress click site identity

Open the option Site Identity inside the customizer.

Step 3: Edit these settings

Step 3 - generatepress logo 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

Step 4 - generatepress logo width

I’ve chosen my logo size to be 250px, but you can decide on what ever suits your website best.

Step 5: Spacing options

Step 5 - generatepress logo example

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

Step 6 - generatepress click publish to save

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

Step 1 - all themes click customize

In your WordPress Dashboard, click on the theme Customizer.

Step 2: Click on Layout

Step 2 - astra click layout

Then click on Layout inside the customizer.

Step 3: Click on Header

Step 3 - astra click header

Then click on Header.

Step 4: Then click Site Identity

Step 4 - astra click site identity

And then click Site Identity to access the logo settings in Astra.

Step 5: Edit these options

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: Logo width slider in Astra

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: That’s it!

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, here’s how to change the Divi theme logo size.

Step 1: Click Theme Options

Step 1 - divi click theme options

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

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: Go to the Theme Customizer

Step 3 - divi click theme customizer

Then click on ‘Theme Customizer’.

Step 4

Step 4 - divi logo settings

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!

Step 5 - divi logo example

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


As you can see, it’s easy to change the logo size for wordpress and most themes acheive 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.

27 thoughts on “How to Change the WordPress Logo Size in Any Theme”

  1. Hi Steve,

    I am using the Cento theme. The theme doesn’t have an option to change the size of the logo. I have applied your suggestions without success.


  2. Thank you so much for sharing!

    One little addition that might help other out here as well. In my case, the logo only increased in size without the top menu being adjusted automatically. The theme I am using (Chelsey – Portfolio Theme for Freelancers and Agencies) required extra CCS adjustment on the ”.menu-chelsey-top-menu” as well. For the ones having the same ”struggle”: I added extra margins on the top and bottom of the ”.menu-chelsey-top-menu” which created a larger top menu.


  3. Wow! Thanks a bunch, this helped me so much, Steve. Really appreciate your time taken to cover these tips, I was so frustrated with my logo size and thanks to you I can finally move on! Great job done!

  4. You’ve shared a working method, really appreciate your work. I was looking for changing logo size but on many sites I just found some code to paste in CSS but it didn’t word. You’ve explained the way to implement it like by hovering on logo and then noting down the code and adding extra CSS.

    Thanks, finally I’ve adjusted logo for my site.

  5. Hello Steve,

    I tried to follow your guidelines but could not get the logo size to adjust. Any tips you can give me? Regardless, thank you for getting this sort of information out on the web!

    • Hey Mark,

      Try adding this CSS to your footer or inside the additional CSS in the customizer.

      header .logo-link img {
      width: 250px;

      Make the width whatever you like.

      Hope it helps!

  6. Step 4: Open the theme customizer

    I am stuck here. I don’t know where to go and find it. Sorry, the instructions need to be more clear….

  7. This helped so much I thought I would have to contact the theme provider for additional help but this solved the problem. But question: will I be able to adjust the sizing to whatever I want? Or is the 230 the max?


  8. Hi Steve,

    Thanks a lot for the very supportive post. I am having the same issue and it’s been few hours that I am trying to find a solution for it. It seems my the logo doesnt change regardless of whatever max-height I put in additional CSS. I really appreciate your help.

    • Hi Adel, what is you website? You’ll need to inspect the element to know the correct CSS class. If the code isn’t changing the size of the logo, then it means the CSS class isn’t correct.

      Hope this helps.

  9. Fixed 🙂
    @media screen and (min-width: 48em) {
    .custom-logo-link img {
    max-width: 260px;

    .custom-logo-link img {
    /* display: inline-block; */
    max-height: 70px;
    /* width: auto; */

  10. I’d like to thank you on detailed guide to customize logo size. It was a difficult task before I gone through your article. Keep coming up with such useful information 🙂

  11. Hi,

    I’m having trouble with this. I want to resize my logo but when I click on additional CSS, it says I need to upgrade to customize the CSS. Is there any way round this?


  12. Hi Steve,

    I tried all the methods already, but still can’t adjust the logo size correctly. Can you help me to check my website? thank you so much.



Leave a Comment

Coffee Shop Blogger
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Privacy Policy