[Resolved] Different images for header site logo and mobile header logo

[David]

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

[Leo]

Hi there,

Can you link us to the site in question? Thanks!

[David]

No, not really. It’s on a local server.

What are the unique selectors for those two images?

Thanks, David.

[Leo]

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.

[David]

Works like a charm. You are my hero.

Thanks, David.

[Leo]

Glad I could help 🙂

[Leo]

Is there another problem now? What am I looking for?

[David]

Is this not self-explanatory? Please view in desktop and mobile mode.

http://woosleyinc.com/

Thanks, D.

[Leo]

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/

[Author]

Posts