How to Move the Announcement Bar to the Bottom in Squarespace

What You'll Create

An announcement bar that sits fixed at the bottom of the screen instead of the top. The bar stays visible as visitors scroll, creating a persistent footer-style notification area. On desktop, it spans the full width of the viewport.

The Problem It Solves

Squarespace only lets you position the announcement bar at the top of your site. But sometimes a bottom position works better—for cookie notices that comply with regulations, ongoing promotions you want persistently visible, or any message that shouldn't interrupt the header experience.

Perfect For

Cookie consent notices, Promotional banners, Newsletter signup prompts, Sale announcements, Important site-wide messages

What Makes This Different

This simple repositioning locks the announcement bar to the bottom of the viewport so it stays visible no matter how far visitors scroll. Unlike the default top position that can get scrolled away, this keeps your message persistently in view. The technique only activates on larger screens—on mobile, the bar returns to its default behavior to avoid blocking content on smaller displays.

Details

• Skill Level: Beginner-Friendly

• Squarespace Version: 7.0 & 7.1

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Announcement bar enabled in site settings

• Toolkit Title: Reposition Announcement Bar

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support