Make Your Announcement Bar Scroll (Marquee) in Squarespace

The Squarespace announcement bar is a great way to advertise your latest deals or your most important information, but making it scroll (marquee) will help draw more attention to it.

You can see a demo of this at the top of this website.

Table of Contents

Step 1 - Add Your Announcement Bar

In Squarespace, go to Marketing → Announcement Bar and enable your announcement bar if you haven’t already.

In the text box, type out whatever text you’d like to appear. You can make words into links as needed at this point. Don’t use your ENTER key to add new lines as this will generate multiple lines of marquee.

Step 2 - Add in the CSS

Now we’re going to put in the code that’ll make the marquee work.

Copy and paste the following CSS into DESIGN → CUSTOM CSS.

/* Removing the underline on link in the announcement bar */
.sqs-announcement-bar-text a{
  text-decoration: unset !important;
}

/* Adding left and right padding, change to match your site padding if needed */
.sqs-announcement-bar-text{
  padding-left: 30px;
  padding-right: 30px;
}

/* Hiding anything that extends beyond the screen */
#announcement-bar-text-inner-id {
  margin: 0 auto;
  overflow: hidden;
}

/* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds */
#announcement-bar-text-inner-id p {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 10s linear infinite;
}

/* Stopping the marquee on hover so people can click on links */
#announcement-bar-text-inner-id p:hover {
  animation-play-state: paused
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}