Have a different logo for mobile site than desktop website

[Drowland712]

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!

[felixmacaspac]

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.

[Drowland712]

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/

[felixmacaspac · Accepted solution]

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

[Drowland712]

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!