Display different desktop & mobile logo

[kostax]

Hello, looking for help to displaying a different logo for desktop & mobile. I know this can be done with the header builder, but this is the only customization I need and was wondering if anyone has achieved this with simple CSS. Something that will allow me to insert the URL of each desktop and mobile logo image and specify sizing. I searched the forums and tried some codes, but unfortunately no luck yet. I’m using Pro version 3.2.3

https://vibecafeandwine.com/

desktop logo:

mobile logo:

[tristup]

Hi Kosta,

Thanks for reaching out.
Even if you tried this by using simple CSS, you need to add two different images. One for desktop and another for mobile devices. I would rather suggest you use the default functionality of Hide During Breakpoint options from Image > Customize.
You just need to hide the Desktop logo in Mobile and other devices listed, and vise versa for the Mobile Logo.

The above process actually generates the CSS which you required, so I suggest you stick to the Theme preset options to avoid any issues related to the custom codes.

Thanks

[kostax]

Hello @tristup, thank you for your reply.

While this is helpful, how does it apply to the logo image in the header? I don’t see any options for “hide during breakpoints” in Theme Options: Header: Logo - Image.

[marc_a]

Hi Kosta,

There’s no hide during breakpoint in the default logo in our theme options but if you are going to use the header builder in Pro, the hide during breakpoint will be available when you are using the image element.

Hope that helps.

Thank you.

[kostax]

thanks @marc_a – i really wish there was some option for this in the default header options as it would make things so easy. Now i’m having to create an entire header just to solve this simple issue when the rest is ok.

[marc_a]

Hi Kosta,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.