Archived topic
Different images for header site logo and mobile header logo
8 replies · Started by David on October 16, 2017
Tom,
I have different images for the header site logo and mobile menu logo, and they are different sizes with different aspect ratios. I've tried this:
.site-logo .header-image {
width:125px;
height:83px;
}
.mobile-header-logo .header-image {
width:170px;
height:40px;
}
The above CSS sets the size to 170/40 in both cases. If those entries are flipped, the size is 125/83 in both cases. I welcome your advice on how to define distinct sizes.
Regards,
David Woosley
Hi there,
Can you link us to the site in question? Thanks!
No, not really. It's on a local server.
What are the unique selectors for those two images?
Thanks, David.
Site logo should be this: https://docs.generatepress.com/article/adding-svg-logo/#setting-the-size
Mobile header logo should be this:
@media (max-width: 768px) {
.main-navigation .site-logo.navigation-logo img, .mobile-header-navigation .site-logo.mobile-header-logo img {
width: 10px;
height: 62px;
}
}Keep in mind that the mobile header logo also has 10px default padding applied.
Works like a charm. You are my hero.
Thanks, David.
Glad I could help :)
Is there another problem now? What am I looking for?
Is this not self-explanatory? Please view in desktop and mobile mode.
Thanks, D.
It's blocking by the CSS you've added for custom fixed header.
Try a bigger number than 200px then wrap it so it's desktop only: https://docs.generatepress.com/article/responsive-display/
