Archived topic
Resize SVG Image used in Navigation Logo
3 replies · Started by Vish on February 5, 2019
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.
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.
That worked like a dream, thanks, David. :)
Thats great - glad to be of help.
