How to Keep the Announcement Bar Sticky in Symmetry Theme?

Store Design

Topic summary

A user wants to make the announcement bar sticky (remain visible while scrolling) on their Shopify store using the Symmetry theme.

Two CSS solutions were provided:

Solution 1:

  • Target #shopify-section-announcement-bar with position: sticky, top: 0, and z-index: 1
  • Adjust header positioning using top: var(--ann-h, 50px) on #shopify-section-header

Solution 2:

  • Apply position: sticky, top: 0, and z-index: 9999 to .announcement-bar
  • If header overlap occurs, add top: var(--announcement-bar-height, 40px) to header.site-header

Implementation:
Both solutions recommend adding the CSS code via Customize → Theme Settings → Custom CSS or directly in Edit code → Assets → base.css.

The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone!
I’m using the Symmetry theme for my Shopify store and I’d like to make the announcement bar sticky, so it stays visible at the top of the page even when users scroll down.

This is my store: https://www.herbalshopdeutschland.com/

4

You can paste this code to the Customize=> Theme Settings=> Custom CSS:

#shopify-section-announcement-bar {
  position: sticky;
  top: 0;
  z-index: 1;
}

#shopify-section-header {
  top: var(--ann-h, 50px);
}
5

Hi @mdb1919911 ,
You can make the announcement bar sticky in the Symmetry theme by adding a small CSS snippet. Here’s how to do it:

1. In your Shopify admin, go to Online Store → Themes → Customize → Theme settings → Custom CSS (or Edit code → Assets → base.css if your theme doesn’t have a Custom CSS box).

2. Add this code:

.announcement-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
}

3. If your header overlaps or moves oddly when scrolling, also add:

header.site-header {
  top: var(--announcement-bar-height, 40px);
}