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?