More Announcement Bar Hacks

Using the announcement bar in Squarespace is a great way to highlight temporary content on your site without needing to edit the main content areas. We think it’s one of the more underrated features of the platform and that it can be used for so many things including: 

  • Letting people know of sales or promos in your shop

  • Limited offers / coupon codes

  • Special hours or holiday closing times that visitors may miss otherwise

  • Links to featured blog content

  • Highlighting awards or press about your company

The announcement bar can be styled to match your site and you can include inline links as well as make the whole bar area clickable. It’s super functional on it’s own out of the box but with just a few bits of code, you can make it even more amazing. Here are our fave AB hacks! 

Make Announcement Bar Permanent 

Why You’d Want To Do This: you’re featuring this content for a reason! As is, once a visitor clicks the announcement bar away - that’s it. This bit of code will remove the ability to dismiss the bar. 

.sqs-announcement-bar-close {
display: none !important;
}

Make Announcement Bar Sticky

Why You’d Want To Do This: If you’re using this area to promote something urgent (like a school closure due to bad weather) or some sort of navigational/contact information, you may want the bar to scroll down the page with the user. 

.sqs-announcement-bar {
z-index: 1001;
position: fixed;
top: auto;
left: 0;
right: 0;
}

Remove Announcement Bar From One Page 

Why You’d Want To Do This: One of our other favorite hacks is using code to remove the header and footer from a page to make a mega landing page. If you’re running ads targeting specific landing pages you may not want or need visitors to see your announcement bar. 

 <style>
.sqs-announcement-bar { 
display: none !important 
}
</style>

Change Text Alignment On Announcement Bar

Why You’d Want To Do This: If you’re using the code to make your announcement bar permanent, there’s a good chance you’re using it to create a bonus navigational area and that may mean that it looks awkward to have this text center-aligned when your primary navigation is aligned to the left or the center. 

.sqs-announcement-bar {
text-align: right; /* change to left if needed */

Bonus Code: 

You may need to play with the spacing (padding) of the announcement bar text to get it to line up better. Just add this snippet to the next line of the code above and adjust the pixels up or down as needed. 

padding-right: 25px; /*change to left or add an additional line if needed */

That’s it!