topic Re: Have a different logo for mobile site than desktop website in CMS Development

Have a different logo for mobile site than desktop website

Drowland712 — Thu, 05 Jan 2023 00:03:37 GMT

Hello, and thank you in advance for the help!

We have built a website and are having an issue where the white logo looks good on desktop, but then is over a white background on mobile and does not show up.

Is there a way to have a different color logo for the mobile version? If not, is it possible to change that white background to something else?

Website link: https://edf-ri.com/

Thank you!

Re: Have a different logo for mobile site than desktop website

felixmacaspac — Wed, 04 Jan 2023 23:59:46 GMT

Hey, @Drowland712 is it possible for you to provide any preview links? It's pretty hard to visualize it based on the description you said.

Re: Have a different logo for mobile site than desktop website

Drowland712 — Thu, 05 Jan 2023 00:05:09 GMT

I meant to put the link in the message! Thank you for replying and calling that out.

The website link is: https://edf-ri.com/

Re: Have a different logo for mobile site than desktop website

felixmacaspac — Thu, 05 Jan 2023 00:21:28 GMT

Hey @Drowland712 it doesn't show up on mobile because the whole background-color is currently white, notice that if you change the background color of the website you can now see the logo, see example below:

to answer your question, I would recommend overriding the image using CSS or JS. in my case I would prefer to override this using CSS.

Something like this:

@media screen and (max-width: 767px) { .header-logo { content: url("http://www.differentimage.com/test.png"); } }

Re: Have a different logo for mobile site than desktop website

Drowland712 — Thu, 05 Jan 2023 00:51:32 GMT

I will try that CSS snippet out. Thank you so much!

They want to keep the background white even thought changing that color would be easiest!