Need css help with logo change also on mobile for specific page

Need css help with logo change also on mobile for specific page

Thanks!

https://www.texasgrandchapel.org/counseling-home

CSS Im using now:

<style>
  header#header.has-logo-image .Header-branding img{display:none}
.has-logo-image .Header-branding img {
    content: url(https://static1.squarespace.com/static/5b32f8a4620b856046835eaa/t/635e97cb5d476971469fa881/1667143627377/Asset+5+%281%29.png#collection-63568126bfd4ba57814422c5)
             
}
</style>

The CSS style Im using works for desktop great changing logo, but not showing change in mobile.

15 hours ago, RefugeChurch said:

Need css help with logo change also on mobile for specific page

Thanks!

https://www.texasgrandchapel.org/counseling-home

 

CSS Im using now:

<style>
  header#header.has-logo-image .Header-branding img{display:none}
.has-logo-image .Header-branding img {
    content: url(https://static1.squarespace.com/static/5b32f8a4620b856046835eaa/t/635e97cb5d476971469fa881/1667143627377/Asset+5+%281%29.png#collection-63568126bfd4ba57814422c5)
             
}
</style>

The CSS style Im using works for desktop great changing logo, but not showing change in mobile.

 

You can try adding to Home > Design > Custom Css

#collection-63568126bfd4ba57814422c5 .Mobile-bar-branding img {
  visibility: hidden;
}

#collection-63568126bfd4ba57814422c5 .Mobile-bar-branding {
  background-image: url('https://static1.squarespace.com/static/5b32f8a4620b856046835eaa/t/635e97cb5d476971469fa881/1667143627377/Asset+5+%281%29.png#collection-63568126bfd4ba57814422c5');
  background-size: contain;
  background-repeat: no-repeat;
  background-position:center center;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing