Archived topic
SVG Logo Resizing
3 replies · Started by Michelle on April 26, 2022
I just replaced my jpg logos with svg files. What a difference! However, svg logos presented me with a few problems:
1. The mobile sticky header is now too large. I tried adding CSS that I found on the forum to resize it, but it changed the logo size entirely for desktop, tablet, and mobile. I also tried resizing it with an online resizer. It did absolutely nothing to change the size.
2. On tablet, the regular logo (not sticky on scroll) needs padding on the left. Why is it flush left only on tablet and not on desktop or mobile? Weird.
3. On tablet and mobile, the sticky header on scroll is larger than the regular logo. Again, why?
The jpg size I previously used was 640px x 105px, if that matters.
Thanks in advance for the help.
Hi Michelle,
SVG logo is nothing different from the image logo in terms of settings.
1. You can adjust mobile header logo height at customizer > layout > primary navigation >Menu Item Height (click on the mobile icon).
2. Tablet and mobile are both using mobile header, so there's the same left margin (10px) on tablet and mobile. The visual difference is coming from the content padding added on tablet.
3. I'm not seeing the logo size changing from regular header to sticky header on mobile.
Thank you. I was able to adjust the mobile menu. I had forgotten about the Menu Item Height.
On tablet, I'd like the logo to be larger than it is before scroll, and smaller after scroll. As it is currently, the logo gets larger on scroll.
Hi Michelle,
Here is a CSS code you may try adding in Appearance > Customize > Additional CSS:
@media (max-width: 1024px) {
.is_stuck.navigation-stick .inside-navigation .site-logo.mobile-header-logo img.is-logo-image {
height:51px;
}
}Kindly let us know how it goes. :)
