Different logo on mobile in 7.1

Site URL: https://breakwaterpools.com

I have a stacked version of the logo that I would like to use on mobile. I was able to hide the current logo with CSS but I'm not sure how to make the alternate logo show up. Any advice much appreciated.

https://breakwaterpools.com

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

replace with new logo url

Hi, I tried the same code on the template I'm working on (falodu) and it hides the logo used on desktop but unfortunately it doesn't show up the alternative logo for mobile...any ideas how to go around it?

13 hours ago, GHG said:

Hi, I tried the same code on the template I'm working on (falodu) and it hides the logo used on desktop but unfortunately it doesn't show up the alternative logo for mobile...any ideas how to go around it?

Can you share link to your site? We can check easier.

Hey, thank you for getting back to me! I sent you a link in a private message as the site is still not live yet.
Thank you again, really appreciate your help 🙂
 

On 6/10/2020 at 5:50 AM, designhalffull said:

Site URL: https://breakwaterpools.com

I have a stacked version of the logo that I would like to use on mobile. I was able to hide the current logo with CSS but I'm not sure how to make the alternate logo show up. Any advice much appreciated.

https://breakwaterpools.com

I would love to hide my mobile logo on a handful of pages - do you have the code for this you could share please?

🙂

On 8/18/2021 at 3:14 PM, anna4 said:

I would love to hide my mobile logo on a handful of pages - do you have the code for this you could share please?

🙂

Hi. Which page you want to hide logo? Each template will need a different code