Archived topic

Logo Responsiveness

5 replies · Started by Aisling on January 22, 2019

Viewing posts 1–6 of 6

January 22, 2019 at 5:40 am #788845

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

January 22, 2019 at 8:21 am #789100

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.

January 22, 2019 at 9:41 am #789184

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

January 22, 2019 at 9:54 am #789208

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;
    }
}

January 22, 2019 at 10:00 am #789218

Great thank you so much

I will give that a try

Aisling

January 22, 2019 at 10:32 am #789251

You're welcome

This archived topic is closed to new replies.

Start building better websites today.