Different mobile logo than my Desktop view?

Support
#1

my site is *****

How can i make my mobile logo different than the logo on desktop view? I have text currently for desktop but want to put an image for mobile. How can i achieve this? Thank you!

#2

Hello @mattcip,

Thanks for asking. :slight_smile:

Following thread will help you get started to implement seprate logo for mobile and desktop:

Thanks.

#3

Hi! I’ve tried looking through it. Whenever I input my logos file name into the css code that would insert the picture, nothing happens, and the image does not show up. I’m not too sure what to do.

#4

Hello There,

Thanks for updating in! To resolve your issue, please make use of this code instead:

@media(max-width:979px){
  .x-brand.text {
    background: url(http://placehold.it/120x120/) center center no-repeat;
    background-size: cover;
    width : 180px;
    text-indent: -9999px;
  }
}

Please do not forget to change the path for your logo image.
We would loved to know if this has work for you. Thank you.

#5

I’ve tried the file directory path to the image in my FTP wp-content uploads as well as testing on an online url for a different picture. Neither worked and no image appeared

#6

Hello There,

Thanks for updating in! I have inspected your page and I could not find any of code that you have applied it to your site. Please add it again so that I can see any error if there is in your code. If you use the example code above, you will have something like this:

Hope this helps. Kindly let us know.

#7

Oh sorry! I’ve just inserted the sample code in now. Nothing showed up.

#8

Hi Matt,

I can see the code, but the URL of the image seems wrong. See this: https://screencast-o-matic.com/watch/cbQFVzIqTD
Make sure that you have the correct image URL.

1 Like