[Resolved] Resize SVG Image used in Navigation Logo

[Vish]

Hello

So, I decided to get rid of the PNG image and use an SVG image type for my site logo.

Currently my setup is that I have disabled Site Header and I only use Navigation with Navigation Logo.

After adding the SVG image, the logo appears too wide. How can I reduce the width of this SVG logo?

When I tried setting a custom width (with height set to ‘auto’) the Logo doesn’t vertically align to the middle and looks weird.

So, what I am looking to achieve?

I want to reduce the size (specially the width) of the navigation logo with the logo being vertically aligned to middle.

How can I achieve this?

Thanks!

Note: Site URL included.

[David]

Hi there,

navigation logos respect the height of the nav menu item height + they have 10px of padding around them. Simplest way if you want it smaller then the nav menu height is to increase the padding:

.main-navigation .navigation-logo img {
    padding: 20px !important;
}

This will retain vertical alignment. As long as the image is vertically aligned in the original SVG so just check the image is centered in the canvas.

[Vish]

That worked like a dream, thanks, David. 🙂

[David]

Thats great – glad to be of help.

[Author]

Posts