Styling The Squarespace Announcement Bar
Your Squarespace announcement bar is a powerful tool for delivering important updates, promotions, or announcements to your audience. While the default style works for many, customizing the announcement bar allows you to bring a fresh, unique touch that aligns with your brand and website’s aesthetic. By changing the announcement bar’s position, width, shape, and style, you can create a visually engaging element that complements your website design and attracts visitor attention.
In this guide, we’ll walk you through the steps to add a custom announcement bar to your Squarespace website using CSS code. Follow my guide to transform this small but mighty feature into a stylish asset that enhances your brand!
Why Customise Your Squarespace Announcement Bar?
Customising your Squarespace announcement bar helps your website stand out and gives it a personal touch. A custom design can make your bar more engaging, aligning it with your brand’s colours, style, and tone. This can be particularly useful if you want to highlight a special promotion, encourage sign-ups, or share timely updates with a bar that visitors will notice.
Step 1: Accessing the Custom CSS Section in Squarespace
To begin, we’ll add custom CSS to achieve the new look. Here’s how to access Squarespace’s Custom CSS editor:
In your Squarespace dashboard, go to Website > Pages > Website Tools > Custom CSS.
In the Custom CSS editor, you’ll paste the code below to create a custom announcement bar style.
Step 2: Adding Custom CSS for Your Squarespace Announcement Bar
Copy and paste the following code into the Custom CSS section to achieve a stylish, responsive announcement bar. This code is very versatile and you can opt to change the bar from right to left and from top to bottom of your header menu.
/* Styled announcement bar */
.sqs-announcement-bar {
border-radius: 8px;
width: 40% !important; /* Desktop width */
margin-top: 16vw !important; /* Changes margin from top to bottom of header */
box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
position: fixed !important;
right: 2.5vw !important; /* Aligns to the right */
left: auto !important; /* Ensures no left alignment */
}
/* Mobile view */
@media (max-width: 768px) {
.sqs-announcement-bar {
width: 90%; /* Centers and expands width on mobile */
top: 0; /* Positions at the very top */
left: 50%; /* Centers the bar horizontally */
transform: translateX(-50%); /* Centers element fully */
margin-top: 0; /* Resets top margin */
right: auto; /* Removes right alignment */
position: absolute; /* Positions it above header */
z-index: 10; /* Ensures it sits above the menu header */
}
}
Step 3: Preview and Adjust
After adding the CSS, preview your website to see how the announcement bar adapts to desktop and mobile views.
Adjusting the Squarespace Announcement Bar’s Position Above or Below the Menu
You can customize the position of the announcement bar to display above or below the menu, depending on the layout and aesthetic you’re aiming for. Here’s how to modify the code to control the bar’s placement by modifying its margin-top property. Here’s how to adjust the code to place the bar as desired:
Position the Announcement Bar Above the Menu:
To position the bar above the header menu, set a smaller margin-top value. This brings the bar higher on the screen, effectively positioning it above the header menu. For example:
@media (min-width: 769px) {
.sqs-announcement-bar {
width: 40% !important; /* Desktop width */
margin-top: 8vw !important; /* Smaller margin brings it closer to the top */
right: 2.5vw !important;
left: auto !important;
position: fixed !important;
transform: none;
}
}
Position the Announcement Bar Below the Menu:
If you’d prefer the announcement bar to sit below the header menu, increase the margin-top to a value that clears the menu area. For example:
@media (min-width: 769px) {
.sqs-announcement-bar {
width: 40% !important;
margin-top: 18vw !important; /* Larger margin places it below the menu */
right: 2.5vw !important;
left: auto !important;
position: fixed !important;
transform: none;
}
}
Switching The Announcement Bar To The Left Hand Side
To switch the bar to the left side, you only need to change right: 2.5vw; to left: 2.5vw; and set right: auto;, like this:
/* Styled announcement bar aligned to the left */
.sqs-announcement-bar { left: 2.5vw; // Aligns to the left //
right: auto; // Removes right alignment //
}
By following these steps, you’ve added a unique, stylish announcement bar to your Squarespace site, helping to make your brand even more memorable. Customising features like the announcement bar can elevate your website’s look and improve visitor experience. Enjoy your new and enhanced announcement bar, and keep exploring customizations that make your site truly one-of-a-kind!
Did I help you? Consider buying me a coffee as thanks!
![Squarespace Back To Top Button [With Indicator Animation]](https://images.squarespace-cdn.com/content/v1/62c2c3cdb503a23ea69c8834/1730734790109-XTAJPP06KGHP7ZYMU7FY/Squarespace-back-to-top-button-guide.jpg)
