4 easy CSS customizations for your announcement bar in Squarespace 7.1

In our last post, we showed you how to add and style the announcement bar on your Squarespace 7.1 website. Today we’re sharing 4 easy ways to customize your announcement bar with a little bit of CSS.

To get up to speed and learn how to add/style the announcement bar to your website, go check out this tutorial.

Let’s get into the announcement bar customizations, shall we?

1. Create a sticky announcement bar in Squarespace

To keep your announcement bar fixed/sticky as visitors scroll down the page, copy and paste this code under Design > Custom CSS:

// FIXED ANNOUNCEMENT BAR

.sqs-announcement-bar {

position: fixed !important;

width: 100%;

}

---

2. Remove the option to close the announcement bar

If you’d like to remove the option to close your announcement bar so it lives on your site permanently, simply copy and paste this code under Design > Custom CSS:

// REMOVE OPTION TO CLOSE ANNOUNCEMENT BAR

.sqs-announcement-bar-close {    

    display: none !important }

---

3. Add a border to your announcement bar

To add a border to add a border to your announcement bar, copy and paste this code under Design > Custom CSS:

// ADD BORDER TO ANNOUNCEMENT BAR

.sqs-announcement-bar{

border-bottom: 1px solid #000000;

}

NOTE: To change the color of the border update #000000 with the HEX color code of choice. To make the border thicker, change 1px to a larger number (for example: 3px).

---

4. Change the background to a branded texture or pattern 

This fun and easy customization is great if you’d like to add a little extra touch of branding to your website! To add a background image to your announcement bar, go to Design > Custom CSS and add the following code:

//CUSTOMIZE ANNOUNCEMENT BAR WITH BACKGROUND IMAGE

.sqs-announcement-bar{

background: url(IMAGEURLHERE);

}

NEXT STEPS:

1. Delete IMAGEURLHERE (bolded above), and make sure your cursor stays in between the parentheses

2. Scroll down to “Manage Custom Files” and click “Add Images or Fonts”

3. Find the image you want to use as your background and upload it

4. When the image is uploaded, click the image thumbnail and it should fill in the image URL where the cursor was (in between the parentheses)

5. Click save!

---

A little CSS magic goes a long way! Like this tutorial? Share it with your friends on Pinterest!