Changing the Max Size of Logo in Header

Hi @seasonslaw,

Thanks for reaching out.
First of all, try to add a lower resolution logo image ( currently it is 1000 x 470 px)

To change logo size, try the CSS below

header .custom-logo-link img {
max-height: 70px;
}

Copy and Paste it in Appearance -> Customize -> Additonal CSS

Note: you can increase/decrease the number 70 to adjust the logo size

Let us know if you have any questions

Best Regards

Hello Spiracle Themes,

The code in additional CSS worked! Thanks for the advice. I do have a follow-up question:

When I adjust the logo to be bigger than 139 px wide, it pushes my menu options to a new line even though there’s still room in the margins of the header. Is there any code I can add to adjust and resize the menu so it doesn’t fall onto a new line as the logo gets larger?

Cheers,

Hi @seasonslaw

When we tried to add more width and height to your logo, it didn’t affect the menu on the right. Check screenshot below

View post on imgur.com

Could you please tell us how to reproduce the issue?

Best Regards

Hello,

The issue does not reproduce at full size. The issue happens as the screen scales down! Check screenshot here:

View post on imgur.com

Here’s the code I put in the additional CSS:

header .custom-logo-link img {
max-height: 70px;
max-width: 150px;
}

Any thoughts?

Thanks,