How to stop logo from re-sizing on Sydney

I have uploaded my logo to appear on the upper left corner on the Sydney theme. I have a problem with the logo re-sizing as I change the width of my browser. When the browser is in full width I have no problem, but when I make the browser narrow, the logo suddenly turns very large.

Is there a way to fix the size of the logo, and not have it change dynamically according to the browser window width?

I have also used the “Intro” theme, and love how the logo sits in place and doesn’t move around or re-size. Is there a way to do the same on Sydney? I really love Sydney and would like to continue using it.

Thanks in advance for your help!

Hello there,

Thank you for reaching out to us here.

Please try adding the following CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px) {
  
  .site-logo {
    width: 120px !important;
    height: auto;
  }
  
}

If it doesn’t resolve the problem, please share the link to your site, so I can inspect it and assist you in better way.

Regards,
Kharis

Thanks for the quick response!

I’ve added the CSS code - now the logo shrinks in proportion to the width of the browser window!

Here’s a link to the site.

Again, my ideal is to make it behave exactly like on the “Intro” theme, where the logo essentially doesn’t move or change sizes.

Perhaps I should ask this separately, but if there is a way to vertically center the menu items in the header, that would be great.

Thanks again,

Hello there,

Please try this code:



@media only screen and (max-width:1024px) {
  
  .site-logo {
    width: 323px !important;
    height: auto;
  }
  
}

323px is the logo width on desktop screen. Let me know how it goes.

Regards,
Kharis