adjusting SVG logo in navigation bar

Hi there,

This should work:

.navigation-logo img {
    width: 100px;
    height: 100px;
}

thanks Leo

No problem!

Hello, Leo. I have an issue with the svg logo alignment on mobile view. The logo doesn't alignt top left!!! I am using the css from above. You can see it here: http://www.anonymio.de
Can you help, please? Thanks, Bin

Hmm if you are using mobile header then try this CSS instead:

.site-logo.mobile-header-logo {
    width: 100px;
    height: 100px;
}

Using all of them now. This seems o work:

.site-logo img {
    width: 275px;
    height: 60px;
}

.navigation-logo img {
    width: 230px;
    height: 50px;
}

.site-logo.mobile-header-logo {
    width: 185px;
    height: 40px;
}

Thanks a lot, Leo

No problem!

BUT: The browser scales much smaller than css! I use one svg 275x60 for all (desktop, mobile, navi).

CSS navi: 230x50 > Browser shows 210x40
CSS mobile: 185x40 > Browser shows 165x40

Where is my mistake?

The logo will scale to fit inside the container (or else it would overhang the container etc..).

Hi Tom,

As a follow up on this, I added an SVG file with the plugin and tried all 3 of the CSS codes.

While the width on all 3 CSS snippets work, the height does not change at all, whether it's 1px or 500px. I tried height auto as well. It causes the logo to distort because of this.

Thoughts?

Can you link me to the site?

basicpup.com

I'm trying to get the mobile version of the logo (Mobile header enabled) to not be cut off in the bottom because the height is too big.

Try updating the selector to this:
.main-navigation .inside-navigation .navigation-logo img

Let me know.

Hi Leo,

Hm that doesn't change the mobile header logo, only desktop. And the height is still unresponsive only width.

This selector is correct but only changes width and not height.
.site-logo.mobile-header-logo {
}