How to keep your Squarespace Announcement Bar fixed while scrolling

The built-in announcement bar is great for bringing attention to promos, sales, or anything else you want to call attention to, but as soon as someone scrolls down the page it’s gone.

That’s why we want to make it sticky so it gets seen and hopefully increases conversions.

Here’s the CSS we’re using on this site.

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.show-on-scroll-wrapper.show {
    display: none;
}

To implement, just and paste this to your Custom CSS which you can find in the Home Menu under Design.

Note we’re using the position: sticky instead of position: fixed. The latter will likely cause the announcement bar to overlap your header/navigation like this.