Squarespace Logo Tips

Some tips for Logo on Squarespace 7.1 websites.

How to Add Logo

To add logo, login to your site

Hover on Right Side > Click Edit

Hover on Header > Click Edit Site Header

Header Layout box will appear. Click Site Title & Logo

and upload logo

How to Remove/Hide Logo

Entire Site

Add this code to Home > Design > Custom CSS to remove Logo on Entire Site

.header-title-logo img {
    display: none;
}

One Page

if you want to hide or remove logo on One Page, add this code to Page Settings > Advanced > Header

<style>
.header-title-logo img {
    display: none;
}
</style>

How to Make Logo Bigger

If logo too small, you can add this code to Home > Design > Custom CSS to make logo bigger.

Adjust 200px to any number what you like.

.header-title-logo img {
    max-height: 200px;
}

Change Mobile Logo Size

Add this code to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title-logo img { 
  max-height: 200px; 
}
}

Change Logo Color

If you want to change Logo Color on One Page, add this code to Page Settings > Advanced > Header

<style>
.header-title-logo img {
    filter: invert(1);
}
</style>

How to Center Logo

Edit Site Header, click Header Layout

Choose Layout has Logo Center

Then Done > Save.

4 thoughts on “Squarespace Logo Tips”

  1. Hi there, I am trying to use a different mobile logo on specific pages of my site. I’ve figured out how to change the logo on specific desktop pages, but can’t seem to customize them on mobile pages. Can you help? Thanks!

    Reply

Leave a Comment