Change the Color of Announcement Bar Close Icon on Squarespace

If you add an announcement bar to your Squarespace website then you’ll notice the bar has text and a close icon, e.g. an X in the corner.

While you can change the color of your announcement bar text natively on Squarespace, you can’t change the color of the exit icon. The exit icon will be the same color as the text.

If you want them to be different then you need to use some simple CSS.

Watch the video

Check out the YouTube video below 👇

To change the color of your announcement bar close icon head to Website > Pages > Website Tools > Custom CSS and add the following code to the custom CSS box:

.sqs-announcement-bar-close {

color: black !important;

}

Obviously you can change the color in the code depending on what color you want the icon to be, using either the color name, HEX code or RGB code.


📩 Join the inner circle to get exclusive code updates


Once you’re happy hit save and you’ll have changed the color of the close icon on your announcement bar. Simple.


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

by Crawford is led by Sam Crawford, a multi-award-winning Squarespace website designer with 700+ sites launched for clients in over 30 countries. He builds fast, mobile-friendly Squarespace 7.1 websites designed for SEO, clear structure, and conversion.

As a Squarespace Expert, Enterprise Partner, Circle Member, and community speaker, Sam is known for pushing the platform’s limits. With 200+ reviews, clients highlight by Crawford’s clarity, precision, and real-world results like higher rankings and stronger lead generation.

https://bycrawford.com
Previous
Previous

Change SEO Appearance of a Page on Squarespace

Next
Next

How to Change Squarespace Site Themes