429shots_so.png
429shots_so.png

Fix Announcement Bar

£0.00

Purchase Plugin

Fix Announcement Bar

This plugin ensures that your announcement bar remains fixed at the bottom (or top) of your Squarespace website, improving visibility and accessibility for important updates or promotions. By implementing this plugin, you can ensure users never miss an important message, even when scrolling through your site.

If you are having problems with the plugin, please get in touch with me at support@maryphilip.com.

Use discount code MARYP10 for 10% off your Squarespace subscription

Compatible with Squarespace Business Plans (not Personal), 7.1 templates, all major browsers, and mobile/tablet-friendly. You will need to be on the Website Business Plan or higher. If your site is not live yet and you would like my 20% discount code as part of the plugin, please get in touch.

Adding the code

  1. Once logged into your site, click Pages → Website Tools → Custom CSS

  2. In the CSS Pannel, copy and paste in the code below, then click Save.

/* fixed section footer */
body:not(.sqs-edit-mode-active) {
.sqs-announcement-bar-dropzone {
    bottom: 0; /* change this to top if you would like it at the top */
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
}

/* hide close icon */
span.sqs-announcement-bar-close {display: none;}
/* hide on menu open */
body.header--menu-open .sqs-announcement-bar {display: none;}

Customisation Options

  • Positioning: If you prefer the announcement bar to be at the top of the page, change bottom: 0; to top: 0; in the CSS.

    • If announcement bar at the top - add a header margin.

      header {margin-top: 40px;}

  • Visibility Control: The plugin hides the close icon to ensure the announcement bar remains visible. If you'd like users to be able to close it, remove this line: span.sqs-announcement-bar-close {display: none;}

  • Hiding on Menu Open: The bar disappears when the mobile menu is open to maintain a clean layout. If you want to keep it visible, remove this section: body.header--menu-open .sqs-announcement-bar {display: none;}

Final Check

  1. Refresh your website to see the changes.

  2. Test scrolling to ensure the announcement bar remains fixed.

  3. If needed, adjust the CSS to better fit your website’s design.