Different logo for mobile and desktop version

Hi

Is there an easy way to have a different logo showing up on the mobile version of a site vs the desktop one?

Thank you :slight_smile:

I still had no luck in managing to do that? Does anyone have any ideas?

You’ll have to implement some display: none usage.

In your default.hbs file (or wherever your logo is located) you’ll insert something like the following:

<div>
    <img class="mobile-logo" src="your-mobile-logo-URL">
    <img class="desktop-logo" src="your-desktop-logo-URL">
</div>

While your CSS will be as such (change the values as you please):

@media (min-width: 969px) {
    .mobile-logo {
        display: none;
    }
}
@media (max-width: 968px) {
    .desktop-logo {
        display: none;
    }
}
1 Like

Awesome!! It worked perfectly.

Thank you for your precious help :slight_smile:

1 Like