[Resolved] adjusting SVG logo in navigation bar

[Carlo]

i have added my logo in svg format with the plugin that has been recommended “safe SVG”.

the logo has come up just the right size in the navigation bar, i saw there was a CSS to adjust the logo if it was used in the site identity
.site-logo img {
width: 100px;
height: 100px;
}

do i need to do anything like this if in the navigation bar? if so could you recommend what CSS to use to make any logo adjustments in the navigation?
thanks

[Leo]

Hi there,

This should work:

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

[Carlo]

thanks Leo

[Leo]

No problem!

[Bin]

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

[Leo]

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

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

[Bin]

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

[Leo]

No problem!

[Bin]

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

CSS navi: 230×50 > Browser shows 210×40
CSS mobile: 185×40 > Browser shows 165×40

Where is my mistake?

[Tom]

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

[David]

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?

[Leo]

Can you link me to the site?

[David]

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.

[Leo]

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

Let me know.

[David]

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 {
}

[Author]

Posts