Archived topic
Need mobile logo a different size than desktop and tablet
5 replies · Started by paddyd on July 19, 2022
Site: https://newcastlehistorical.ca
I have two different logos in use - one for mobile and one for desktop and tablet. I figured out how to do that via various previous posts.
However, the logo on mobile is WAY too small. If I set its width to 250px in Customizer->Site Identity, it's perfect. However, on desktop and tablet, it needs to be 110px - which is where it is now set. But I can't figure out the CSS for changing the logo width for @media (max-width: 768px). I tried setting the mobile sizing as suggested using the line height for the menu, but that looks absolutely horrible. I don't want the menu getting any higher and I certainly don't want all the extra white space above and below that this adds. And the logo itself didn't get any bigger - at all.
I've tried various solutions suggested - but none of them work. (https://docs.generatepress.com/article/mobile-header/#branding-type for instance - doesn't do anything. https://generatepress.com/forums/topic/mobile-header-logo-size-2/ - logo doesn't change size but space to the right of it grows...)
I'm stumped. I've looked at the code, but can't seem to find the correct selectors.
Hi Paddyd,
Can you try adding this through Appearance > Customize > Additional CSS?:
@media (max-width: 768px) {
.site-header .header-image {
width: 250px;
}
}If it doesn’t work can you leave it there and let us know. We’ll check why it wouldn’t work.
Hope to hear from you soon.
Bingo! That works! I had the wrong selector in there, as I suspected: ".site-logo .mobile-header-logo", instead of "site-header .header-image". That was from another help thread from a year or two ago on a similar issue. So - out of curiosity - would updates to GP in the ensuing interval have changed how the header part of the theme was coded? I did look at the code, trying to find the right bits to target, but clearly missed. :p
Hi there,
theres various selectors for the logos.
Your: site-logo .mobile-header-logo is only present on mobile if the Mobile Header is enabled in the Customizer.
Aha. Well that makes sense. The code I tried came from a discussion where there was no public link so that may not have been completely evident to me. (I totally understand allowing the support staff-only accessible links, but it definitely can make the discussion less useful/clear for future viewers)
Yeah that is a negative. Although we need to review the logo sizing to make it easier and without all the variant classes.
