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

GP Premium 1.3.1

[Leo]

Hi there,

This should work:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

thanks Leo

[Leo]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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..).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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