How to Change the WordPress Logo Size in Any Theme

50 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.

   Regards,
   Jimmy

   • Hi Jimmy,

     It really depends on which demo you imported as some will need custom CSS and some will need to be edited in Elementor.

     If you give me a link you your website, I will have a better understanding of how you can change your logo size.

     Best wishes,
     Steve

     • Hello Steve

       I have the same issue as well

       Pls check priyastrendfudz.com for me.Struggling with it

       Rgds
       Kisdhor

       • Hi Kishor, try using this code:

         .site-header .site-branding a img {
         max-height: 230px;
         }

         You can change the ‘230px’ to whatever size you like.

         Hope this helps!

     • Hello Steve, please help me to increase logo size. I have this theme: construction field on localhost.
       Thank You

       • http://www.acmethemes.com/demo/?theme=construction-field

       • Hi Toma, try using:

         img.custom-logo{
height: 40px;
width: auto;
}

         If you want a bigger logo though, you should use a larger image size and then scale it down if you have to.

         I hope this helps!

2. Oh gosh thank you so much! Been searching all day for this. It solved the problem!

3. 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.

   Hayo

4. Thank you! That was super helpful

   • You’re welcome Jessica 🙂

5. 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!

   • You’re welcome Rachel, thanks for the awesome feedback! 😀

6. 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.

   • Thanks Dheeraj, I’m glad you got it sorted 😀

7. 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!

8. 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….

   • Hi Elizabeth, apologies you got stuck with this.

     You can find the Customizer by going to Appearence > Customizer from the WordPress admin.

     You can see an image of where to click here: https://coffeeshopblogger.com/wordpress-logo-size/#Step_1_Click_the_customizer

     Hope this helps!

9. 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?

   Thanks.

   • Hey Aundra, you can make it any size you like!

     Glad you got this to work 🙂

10. 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.

      • Hi Steve, thanks for the help. It’s Paraphgroup.com.au
        I am getting crazy! nothing works!

11. 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; */
    }

    • this works perfectly but the problem is it is also increasing the header size which is not desirable.Can you please help me? I am using cavalier theme.

      • Hi Uday, I can’t see a logo on your site. Are you still trying to fix this?

12. 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 🙂

13. 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?

    Thanks

    • Hi Katie, it really depends on the theme you’re using. All themes should allow access to additional CSS because it comes as standard with WordPress. Another options would be to add a CSS plugin to add the code.

      I hope this helps!

14. 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.
    pohyunru.com

    Regards,
    John

15. Hey Steve!

    The coding thing didn’t work for me. I am still struggling with the size issue.
    My site- https://pahariafoundation.online

    Need Help.

    Thankyou!

    • Hi Pooja, I can’t see an image for your logo. Do you still need help with this?

16. Hi! I am trying to do this on my theme but it is not working… any suggestions?

    • Hi Ashley, if your website is staging.hessmillwork.com, try using this code:

      img.up-logo {
height: 40px;
}

      You can only make it small though as the image is only 45px in height. If you want it bigger, you’ll have to upload a larger sized image.

      I hope this helps!

17. Hi! I was able to adjust my logo size (HUGE THANKS) but the padding options are not available. I am using Trellis Bamboo. Any CSS padding tricks?

    • Hi Laura, you could try adding padding: 20px 20px; to the element as well. The first 20px is the top and bottom padding and the second 20px is for the left and right padding.

      I hope this helps.

18. Yeahhhh none of these work. It has NO affect on the logo size. I dont know if these other people were paid to post positive responses but it is all rubish.

    • Hi Chris, I can assure you no one is paid to leave comments and I sincerely want to help. If you tell me you website, I will gladly take a look.

19. Hey,
    Thanks for this blog. It helped a lot but can you help me how to increase the height and width both. Because hen I applied your thing, the height settled well but I guess the width needs to be settled as well.

    Looking forward to hearing from you.

    Thanks
    Maha

    • Hi Maha, yes, try adding width: auto; to the element. I hope this helps!

      Thanks

20. Hello Steve,

    I am using colormag theme where custom logo slider is not available. This post is really great but I am looking to set responsive logo for mobile site if you can help me then it would be very helpful for me.

    Thanks

    • Hi Jasmeet, what do you want the logo to do on mobile devices? Is your site adietlife.com?

      Thanks

21. Hi Steve,

    Thanks for sharing – I’ve been trying to increase the logo size in my header on my website: http://www.deafadventures.co.nz – I tried many of the css and nothing had any effect except this one:

    .header .navbar-logo img {
    max-height: 200px !important;
    }

    but it only gets smaller, not bigger, so it might be a padding issue? Any advice would be appreciated. Thank you.

    • Hi Rachel, try using:

      header .navbar-logo .logo-img {
height: 200px;
}

      This will make the logo bigger on desktop at least.

      Hope that helps!

22. Hey Steve,
    Great info, so far not helping me because for some reason when I do the right click thing I am not seeing the inspect thing. My website is https://Idraw4me.com and I am using the Amphibious Theme and cannot get this logo to size up. Any help would be greatly appreciated.
    Thanks,
    David

    • Hi David, it looks like you’re using Elegant Themes, so you should be able to adjust the logo size in the theme settings.

      Hope this helps!

23. Hey Steve, thanks for this super helpful post!

    It all makes sense but i’m trying to increase the size of my friends logo on mobile in the Twenty Twenty-One theme…

    The size of the logo on desktop is perfect but it’s too small on mobile. See website below.

    Any help to increase the size purely on mobile would be much appreciated.

    https://www.katherineanntravers.com/

    Thanks

24. Hi Steve,
    My header logo has stretched sideways and although I can change the height settings in Divi, there is no option to change the width. Can you help, please? I tried all of the options you’ve given here just in case one of them worked, but nothing helps. The website is acegroupinc.com.au
    Thanks so much
    Ingrid

    • Hi Ingrid,

      When using Divi, you can only make it as big relative to the container it’s in. You’ll have to adjust the entire size of the header if you want the logo any bigger.

      I hope this helps!

Comments are closed.