[Share] Site Title CSS

Some useful CSS code for Site Title (7.1 version)

• With code run on One Page: Use code to Page Header Code Injection or Code Block (if plan doesn't support Code Injection)

Site Title Color (One Page)

<style>
  a#site-title {
  	color: #f1f !important;
  }
</style>

Remove Site Title (One Page)

<style>
  a#site-title {
  	display: none !important;
  }
</style>

Additional Text under Site Title

Use code to Custom CSS box

a#site-title:after {
    content: "Squarespace 7.1";
    display: block;
    font-size: 18px;
}

Rename Site Title (One Page)

<style>
  a#site-title {
    font-size: 0;
}
a#site-title:after {
    content: "enter new site title";
    font-size: 34px;
}
</style>

Logo with Site Title

Use this code to Custom CSS box

a#site-title:before {
    content: "";
    display: block;
    background-image: url(https://cdn.pixabay.com/photo/2024/01/07/16/27/reed-8493547_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 70px;
}

Replace Pixabay with your logo url

Hide Site Title on Scroll

Use code to Custom CSS box

header#header.shrink a#site-title {
	display: none !important;
}

Change Site Title Color on Scroll

use code to Custom CSS box

header#header.shrink a#site-title {
	color: #000 !important;
}

Change Site Title Color on Cart Page

Use this CSS code

body#cart a#site-title {
	color: #f1f !important;
}

Float Site Title on Left of Site

Use this CSS code

a#site-title {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(90deg) !important;
    z-index: 99999;
    left: 0px;
}

header#header *:not(#site-title) {
    transform: unset !important;
}

If you have problems, you can comment below.