Jump to content

Change header features on scroll

Go to solution Solved by Sam0smith,

Recommended Posts

Hey guys,

I would like to have my navigation bar (header) change colour on a scroll. I found below .js snippet listening to such an event. I only seem to be able to apply changes to the background colour of the bar and the font colour of the links. I would like to also have my logo and the shopping cart change colours. Any ideas what I need to insert in addition to below?



#header {
    background-color: rgba(0,0,0,0);
    transition: background-color 500ms ease;
    &.is-scrolled { background-color: white; }

header#header.shrink a {
    transition: color 500ms ease;
    color: black;


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
        var header = $("#header");
        if ($(window).scrollTop() >= 100) {
        } else {


Link to comment

In order to target a specific page, you just have to go to the “Website” tab in the Squarespace editor. Once you do that, hover on the page that you’re targetting then click the settings icon of that specific page.

Once you do that, click the advanced tab and paste the following CSS code there:


.is-scrolled a {
    color: #000 !important;

.is-scrolled .icon.icon--cart {
    stroke: #000 !important;
.is-scrolled .icon-cart-quantity {
    stroke: #000 !important;


Link to comment

Thanks, I figured I will only be able to "overwrite" the main code in the advanced tabs of the single pages.

I was hoping I don't need to touch the other pages and just make the index page dynamic.


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.