Hide the “x” On the Announcement Bar

You can use the Squarespace announcement bar to display a custom message above your site. This is a great way to announce a sale, promotion, a change to your hours, or other important updates.

The announcement bar appears on every page of your site and has an “x” in the upper right corner that visitors can click to close the announcement bar. When this is done if they revisit your site they will no longer see your key messages. We like to remove this “x” to ensure that the announcement bar is always visible.

To add the custom code, follow this path with within your Squarespace website administration panel: Website Tools > Custom CSS (or use the search feature to find “Custom CSS”.

Copy the code provided and save, the code is instantly applied to your site.

Designer Top Tip: add a descriptor before each code block to clearly identify what that code block is for as it may not always be clear from the field names what the code was designed for. This helps with troubleshooting and any edits that may be needed to the code in future.

---

The image below shows a website with the “x” disabled, making the announcement bar ever present.

//HIDE CLOSE ON ANNOUNCEMENT BAR//

.sqs-announcement-bar-close {

  display: none !important; }