I love using the announcement bar feature in Squarespace, but I love it even more when I change it with custom code! 😅

In this tutorial, we’ll use CSS to pull the announcement bar away from the top of the page so it floats over your site content. Be sure to watch the video so you know how to update the code below.

There are a lot of cool ways to customize this feature, so be sure to check out my other related tutorials linked below!

Here is the code from this tutorial. Be sure to adjust the sizes and colors to make it uniquely yours!

.sqs-announcement-bar{
border-radius: 8px;
position: fixed;
margin: 5vw;
border: 1px solid #333; box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
background: #F6EDCE
}

⭐ Free Training: Squarespace CSS Basics

🔗 How to install CSS in one page on your Squarespace site

📺 Tutorial: add a background image to the announcement bar

📺 Tutorial: add a featured image to the announcement bar

📺 Tutorial: remove the close icon from the announcement bar