How to create a mini announcement bar in Squarespace

Dec 19

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

While this tutorial was recorded using Squarespace 7.1, the codes will also work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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!

Video tutorial

Code Example

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
}