[Support request] SVG Logo on scroll

[Jason Westbrook]

Hey guys I am showing a blurry and appears to be scrunching the logo so its not staying to size. I have it set for 200×40 pixels.

Thanks for the tips!

[Tom]

You can upload an SVG as your logo as long as you have a plugin like this installed: https://wordpress.org/plugins/safe-svg/

You can find more info here: https://docs.generatepress.com/article/adding-svg-logo/

[Jason Westbrook]

I have that plugin already installed and css code in the css editor for:

.site-logo img {
width: 200px;
height: 40px;
}

But it auto scrunches it and makes it weird.

[Leo]

Try this CSS:

.main-navigation .navigation-logo img {
    height: 40px;
    padding: 0;
}

[Jason Westbrook]

That keeps it working for scroll fine but too big for normal logo. Is there another css code to add to that to control logo size before scrolling?

[Tom]

It looks squished in the sticky nav, try this:

.main-navigation.navigation-stick .navigation-logo img {
    width: auto;
}

Although I’m seeing it as a PNG, which wouldn’t require any of this. Did you remove the SVG?

[Author]

Posts