How to Make the Announcement Bar Permanent in Squarespace

The Announcement Bar in Squarespace is super handy. I’ve used it in the past for special offers, to highlight products, or to share news. But what if you want the announcement bar to persist instead of giving site visitors the option to close it?

Recently on two client websites I’ve added code to remove the Close Box (the big X ) on the right, so the Announcement Bar stays fixed and looks like a permanent part of the website. This is a great feature we added to Isa Leshko’s website.

The result looks like a design element, rather than an announcement bar that closes.

Remove the Close Box on the Announcement Bar

To make the announcement bar permanent, just add the following code to Design > Custom CSS.

Note: this code works on Brine family templates. For other template families, YMMV.

/* remove close button on announcement bar */
.sqs-announcement-bar-close { display: none !important }

Save your code. Then refresh your page and you’ll see the X on the right side of the announcement bar is gone.

On mobile, it will look something like this:

Removing the Announcement Bar on Mobile

If you’d prefer to just remove the announcement bar on mobile, you can do that too. You’ll add the following code to Design > Custom CSS.

/* remove announcement bar on mobile */
@media only screen and (max-width: 640px)
{.sqs-announcement-bar  { display: none; }
}

---