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

#10. Change a part of site title size

Suppose we need to change text “x5” to bigger

You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a#site-title").each(function() {
    $(this).html($(this).html().replace(/x5/g, "<span>x5</span>"));
});
});
</script>
<style>
  a#site-title span {
    font-size: 30px;
}
</style>

#11. Change a part of site title color

If you need to change “x5” color

You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a#site-title").each(function() {
    $(this).html($(this).html().replace(/x5/g, "<span>x5</span>"));
});
});
</script>
<style>
  a#site-title span {
    color: #f1f;
}
</style>

Result

#12. Hover Site Title – Rotate it 360 degree

You can use this code to Custom CSS box

a#site-title {
    transition: transform 0.5s ease-in-out;
    display: inline-block;
}
a#site-title:hover {
    transform: rotate(360deg);
}

#13. Site Title – Different color on each character

You can use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var colors = ["red", "blue", "green", "orange", "purple", "yellow", "pink", "cyan"];
    var text = $("#site-title").text();
    var coloredText = "";
    for (var i = 0; i < text.length; i++) {
        var color = colors[i % colors.length];
        coloredText += '<span style="color:' + color + ';">' + text[i] + '</span>';
    }
    $("#site-title").html(coloredText);
});
</script>

Result

#14. Site Title in middle of screen on scroll

You can use this code to Custom CSS box.

a#site-title {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    text-align: center;
    width: 150px !important;
    white-space: nowrap;
}

#15. Extra Logo under Logo (Mobile)

Use code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a href="https://google.com" class="mobile-second-logo"><img src="https://cdn.pixabay.com/photo/2024/10/20/14/09/pumpkins-9135128_1280.jpg"/></a>').insertAfter('div.header-mobile-logo a');
});
</script>
<style>
  a.mobile-second-logo {
    display: block !important;
}
a.mobile-second-logo img {
    display: block;
    width: 50px;
    max-height: unset !important;
}
</style>

Chang Google to your site url or desired url

Replace Pixabay with second logo url.