How to style the announcement bar on Squarespace
Stying the announcement bar
The Squarespace announcement bar is a section on your website above your main navigation that spans the full width of your website page. The announcement bar is a great way to display key pieces of information, current promotions and discounts or any other updates you want your customers to see. The standard announcement bar provided by Squarespace is generally okay but when creating a fully custom site, we can make some subtle changes to have it tie in with the aesthetic of the rest of our website.
To start off we will need to head to the Website tools section and then over to our Custom CSS panel and input our custom code to style the announcement bar.
Firstly there is no option provided by Squarespace to remove the close icon on the top right hand corner. To remove this we can implement the following code.
.sqs-announcement-bar-close {
display: none;
}
Next, we can play about with the padding around the announcement bar. The default size is a little too thick and takes up too much room above your navigation so we can make the change with the following code which will decrease the size above and below the text.
.sqs-announcement-bar-text {
padding-top: 5px;
padding-bottom: 5px;
}
Once we have the padding adjusted to our required size we can then amend the font size and add a custom font to tie in with the fonts on our website.
.sqs-announcement-bar-text p {
font-size: 13px;
font-family: 'SequelSansBookBody';
}
Finally, we can then change any links in the announcement bar into a button by using the following code.
.sqs-announcement-bar p a {
display: inline-block;
text-decoration: none !important;
color: #000000 !important;
background: #FAFAFA;
border-radius: 50px;
padding: 3px 16px;
margin: 5px;
}
And there we have it, by using the code provided we can add a nice touch to style the announcement bar. This simple addition can elevate the announcement bar, helping to spark curiosity and increase conversion.
If you have a project in mind you can get in touch by email at hello@jamiestewartdesign.com, Alternativley you can fill out the contact form on my site or call me.
