Want different logo on homepage than all other pages

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>

Hi @tuanphan, I want to change the logo on only one page of my site.  Is this the code that I need?

On this page of my site, I would like to change the logo that you see there at the top to a different one.

https://www.coindisplays.com/home-goods-and-decor

If possible, where do I load the new logo?

Thanks,

Paul

On 3/7/2020 at 3:00 AM, coindisplays said:

Hi @tuanphan, I want to change the logo on only one page of my site.  Is this the code that I need?

On this page of my site, I would like to change the logo that you see there at the top to a different one.

https://www.coindisplays.com/home-goods-and-decor

If possible, where do I load the new logo?

Thanks,

Paul

<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>

Hi @tuanphan, 

Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page".

I also need to know how to center the logo. 

I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct?

3 hours ago, peterbjerg said:

Hi @tuanphan, 

Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page".

I also need to know how to center the logo. 

I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct?

above code for SS 7.1, one page. So yes, you can use on client's site.

Center logo? You mean left-right menu, center logo?

you can upload image via this guide https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

the image has url yoursite.com/s/image

eg: beaverhero.com/s/beach.png

@tuanphan I tried, but it did not work. 

Site: https://arenastrategy.squarespace.com/cover-page

Password: Arenasite

All together, the exiting code for this page is: 

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}

  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}

  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}

  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}

</style>

ADDING your code, but with link to my image,  looks like this, but didnt work 😞 Maybe you can help?

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}
  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}
  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}
  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

add !important to after

background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png) !important;

Wonderfull, THAT worked!!

Could you also tell me what code to add to center the image/alt logo horizontally?