Different header logo for desktop and mobile/tablet

Hi,

I was wondering if there is a possibility to have two different logos for desktop version and mobile/tablet version?

The thing is that the logo that we use is in the color: #F41921

But the thing is that the website itself is also in those colors, the navigation bar etc.

It looks and works perfectly well with the desktop version, but you would go to the mobile version then the logo basically disappears.

So I was wondering if it's possible to have one logo for the desktop version in the color mentioned above and the mobile/tablet logo in white for instance.

Please advice.

Regards,
Odinn Thor

Hi,

you can't upload a second logo, there's no such option. There are two possible workarounds though if you are familiar with html & css:

1. you hardcode another logo element in the source code of the theme and then use css to keep one of the logos hidden depending on screen width.
2. use only css - add your secondary logo as a css background of the logo link and use css to hide the original logo image (<img>) depending on screen resolution. If you take this approach you will need to set some dimensions of the logo link, otherwise it will collapse once the <img> is hidden.


Regards