Change Mobile Logo on one page

Site URL: http://www.quick2hire.co.uk

Can someone help?

I've managed to change the logo on a specific page, but it hasn't changed for the mobile version.

I want to know how to change a specific page logo for mobile. 

If anyone can assist it would be greatly appreciated.

11 hours ago, Quick2Hire said:

Site URL: http://www.quick2hire.co.uk

Can someone help?

I've managed to change the logo on a specific page, but it hasn't changed for the mobile version.

I want to know how to change a specific page logo for mobile. 

If anyone can assist it would be greatly appreciated.

I try using the pseudo element for the logo link and it seems fine. Kindly try adding to Home > Design > Custom Css

#collection-62f50295c540e678336f3df5 .header-title-logo a:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0;
  left: 0;
  background-image: url(https://images.unsplash.com/photo-1607081758728-78b82a34dc64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbGxlY3Rpb258ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60);
  background-position: center center;
  background-size: cover;
}

#collection-62f50295c540e678336f3df5 .header-title-logo a picture {
  visibility: hidden;
}

Change the url with your image. In addition to that change the your desired page ID  with #collection-62f50295c540e678336f3df5 on my code to set the logo on it

You can use the following extension to get the page Id Squarespace ID Finder

How to get page id: http://recordit.co/qwnj09oNCa

Hope they can help

Hello there, 

I changed the logo on a specific page to make it white instead of grey.
I added a code on the specific page and it worked for the desktop.

But somehow, the logo on the mobile version bugs and repeats itself, I don't know why.

Here is the site URL and the specifig page where the mobile logo repeats itself
https://www.margauxvalla.com/prestations
 

And here is the code I added to have the logo white : 
Page > Prestations > Advanced

<style>

.header-title{
 background-image:url('https://static1.squarespace.com/static/66e0104bab349f1430ae2056/t/66e06547d7f31159cdb579be/1725982023486/Coton.png');
 background-size: contain
} 
.header-title img{
opacity:0
} 
</style>

---

Can someone help me here ?
Thanks a lot

On 9/26/2024 at 9:31 PM, Delphinesoade said:

Hello there, 

I changed the logo on a specific page to make it white instead of grey.
I added a code on the specific page and it worked for the desktop.

But somehow, the logo on the mobile version bugs and repeats itself, I don't know why.

Here is the site URL and the specifig page where the mobile logo repeats itself
https://www.margauxvalla.com/prestations
 

And here is the code I added to have the logo white : 
Page > Prestations > Advanced

<style>

.header-title{
 background-image:url('https://static1.squarespace.com/static/66e0104bab349f1430ae2056/t/66e06547d7f31159cdb579be/1725982023486/Coton.png');
 background-size: contain
} 
.header-title img{
opacity:0
} 
</style>

 

---

Can someone help me here ?
Thanks a lot

Change your code to this

<style>
header#header img {
 content:url('https://static1.squarespace.com/static/66e0104bab349f1430ae2056/t/66e06547d7f31159cdb579be/1725982023486/Coton.png');
} 
</style>