Want different logo on homepage than all other pages

On 11/1/2021 at 12:06 AM, iamRob said:

Hi @tuanphan, is there a way to get a bigger logo on the homepage with a personal plan as well?

Thanks

Yes. Possible. Can you share link to your site? And homepage mobile or desktop?

On 3/2/2020 at 12:50 PM, tuanphan said:

To change logo on One Page, add this code to Page Settings > Advanced > Header

<style>
  .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;
}
</style>

 

Hiya, this worked great for changing the image for my header title, but I want to be able to change the button and icons on either side in the header to the styles that match the page, how can I do this?

On 11/3/2021 at 4:22 AM, sg2021 said:

Hiya, this worked great for changing the image for my header title, but I want to be able to change the button and icons on either side in the header to the styles that match the page, how can I do this?

What is your site url? We can check button/icon code easier

Hi  @tuanphan 

I have been able to make this work on my site; using the below code. This was able to update my logo for my homepage from "black" to "white". However, it only works with "desktop" site, when I try on "mobile" version it still shows "black" logo. Any help? 

<style> 
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6054acf7d8d56c08cb795cec/25e81d36-36df-40e9-a167-e60c0e7f0f35/potong_logo_white_transparent.png?format=1500w
);
    background-size: contain;
    background-repeat: no-repeat;
}
</style>

On 1/2/2023 at 5:35 PM, torboonpiti said:

Hi  @tuanphan 

I have been able to make this work on my site; using the below code. This was able to update my logo for my homepage from "black" to "white". However, it only works with "desktop" site, when I try on "mobile" version it still shows "black" logo. Any help? 

 

<style> 
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6054acf7d8d56c08cb795cec/25e81d36-36df-40e9-a167-e60c0e7f0f35/potong_logo_white_transparent.png?format=1500w
);
    background-size: contain;
    background-repeat: no-repeat;
}
</style>

 

 

Use this new code

<style> 
 header#header img {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6054acf7d8d56c08cb795cec/25e81d36-36df-40e9-a167-e60c0e7f0f35/potong_logo_white_transparent.png?format=1500w);
}
</style>

Hi @tuanphan, I'm also trying to place a different logo on my homepage than in the rest of the website.

I tried the code you post but I'm afraid it doesn't work.
The example link that you provided "beaver..." I changed it for mywebsite.com/s/name_of_the_file.png

But the image is not loading. Still showing the normal logo.

Im not sure if the code is not working or I'm not linking the file correctly.

My website is www.sebastiagalbany.com

Thanks in advance.

On 3/22/2023 at 12:48 AM, SebG said:

Hi @tuanphan, I'm also trying to place a different logo on my homepage than in the rest of the website.

I tried the code you post but I'm afraid it doesn't work.
The example link that you provided "beaver..." I changed it for mywebsite.com/s/name_of_the_file.png

 

But the image is not loading. Still showing the normal logo.

Im not sure if the code is not working or I'm not linking the file correctly.

My website is www.sebastiagalbany.com

 

Thanks in advance.

Hi,

Have you uploaded name_of_the_file.png to your site yet?

Which exact code did you add?

On 3/25/2023 at 9:07 AM, tuanphan said:

Hi,

Have you uploaded name_of_the_file.png to your site yet?

Which exact code did you add?

Hello @tuanphan.
I manage to solve it.
Thanks anyway for the feedback.

On 3/26/2023 at 10:10 PM, SebG said:

Hello @tuanphan.
I manage to solve it.
Thanks anyway for the feedback.

Hello again @tuanphan
As I mention, I managed to change the logo for a different one on my home page only.

That works on the computer browser but I notice it does not work on the mobile version, it still shows the normal logo.

The code that I paste on the home page to change it is:

<meta name="facebook-domain-verification" content="26n6zcyj3h5175htuyob39h0hfc0o4" />

<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

-

It is a code I copied from here.

So, what should I do to change the logo on the mobile version of the home too?

my website:

www.sebastiagalbany.com

Thanks in advance.

On 3/31/2023 at 8:44 PM, SebG said:

Hello again @tuanphan
As I mention, I managed to change the logo for a different one on my home page only.

That works on the computer browser but I notice it does not work on the mobile version, it still shows the normal logo.

The code that I paste on the home page to change it is:

<meta name="facebook-domain-verification" content="26n6zcyj3h5175htuyob39h0hfc0o4" />

<style>
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

 

-

It is a code I copied from here.

So, what should I do to change the logo on the mobile version of the home too?

my website:

www.sebastiagalbany.com

Thanks in advance.

Use this new code

<style>
 header#header img {
   content: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
}
</style>

9 hours ago, tuanphan said:

Use this new code

<style>
 header#header img {
   content: url(https://static1.squarespace.com/static/619e77369696e6457e9209eb/t/6419f238c47b3325e502a05f/1679422008311/Website_Logo_v01center130px_WHITE.png);
}
</style>

 

That worked perfectly!

Thanks a lot @tuanphan for your help and hope you are feeling better.