[Support request] Logo Responsiveness

[Aisling]

Hi guys,

This may have been discussed before but I cannot find it.

What I want to do is have a logo that changes based on whether I am viewing in desktop/tablet/mobile. The logo I have for desktop is slightly different than that of the logo for mobile.

Could this be done with some simple code?

I am currently using elementor to implement this but would prefer to do it through generate press

Thanks

Aisling

[David]

Hi there,

do you mean the logo in the mobile navigation bar or the main site logo?
If nav logo then you can use the Mobile header, this removes the main site logo and allows you to select a different logo to be displayed aside the hamburger menu.

If its the site header logo then easiest way is to use the Header Widget to add your mobile site logo and then we can use some simple CSS to hide them accordingly.

Let me know.

[Aisling]

Hi David

Thanks for the speedy response

Yes it is for the site header logo that I wish to change on mobile.

I have the site header logo already in place for mobile.

Thanks

Aisling

[David]

So you would do something like this.
Add your Mobile logo image in the Header Widget.

Then apply this CSS:

@media (min-width: 768px) {
    .header-widget {
        display: none;
    }
}
@media (max-width: 767px) {
    .site-logo {
        display: none;
    }
}

[Aisling]

Great thank you so much

I will give that a try

Aisling

[David]

You’re welcome

[Author]

Posts