How to Make the Announcement Bar Permanent in Squarespace

Making 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 the Intero Restaurant Squarespace website and to Isa Leshko’s website as well.

 
example of permanent Announcement bar in squarespace
 

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.

Custom CSS Menu in Squarespace

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:

 
permanent announcement bar on mobile
 
 

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; }
}

If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.