Sticky announcement bar on Symetry theme

Store Design

Topic summary

A user seeks to make the announcement bar sticky on Shopify’s Symmetry theme so it remains visible while scrolling.

Initial Solution:

  • A contributor provides CSS code to be added to theme.css/base.css that sets the announcement bar to position: sticky with appropriate z-index values
  • The code also adjusts the header position to accommodate the sticky bar
  • Includes a screenshot demonstrating the result

Mobile View Issue:

  • The user reports that on mobile, scrolling causes the announcement bar to shrink and the spacing between it and the logo to decrease
  • Two contributors offer solutions involving additional CSS code for mobile screens (max-width: 767.98px)
  • One solution adjusts z-index, another involves adding code to theme.liquid

Final Adjustment:

  • The user shares screenshots showing the spacing problem during scroll
  • The contributor recommends modifying the previously provided code by changing the top value from 30px to 39px to maintain consistent spacing

Resolution: The issue appears resolved, with the user thanking contributors for their help.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I am using the Shopify Symmetry theme and would like to make the announcement bar sticky so that it remains at the top of the page while scrolling.

1 Like
2

Hello,
Please share “Store URL”
Thanks!

3

Hi @Lars_Veldman

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.shopify-section.shopify-section-group-header-group.section-announcement-bar {
    position: sticky;
    top: 0 !important;
    z-index: 401 !important;
}
.section-header {
    top: 30px !important;
}

Result:

websensepro_0-1737464444617.png
websensepro_0-1737464444617.png830Ă—490 394 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
4

Hi, the url is:

Refined-melbourne.com

5

That is great! I have one more question. When in mobile view, when I scroll the header makes te announcement bar a little smaller. Can I change something so that in mobile view the announcement bar does not get smaller?

6

Hi @Lars_Veldman

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

7

@Lars_Veldman

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media only screen and (max-width: 767.98px) {
    .section-header {
         z-index: 400 !important;
    }
}
1 Like
8

Thanks, I only have one question. see the two images below. Now when i scroll the space between the announcement bar and the logo is going to be smaller and i want it to stay the same.

Scherm­afbeelding 2025-01-21 om 14.22.52.png
Scherm­afbeelding 2025-01-21 om 14.22.52.png1242×426 76 KB

Scherm­afbeelding 2025-01-21 om 14.23.02.png
Scherm­afbeelding 2025-01-21 om 14.23.02.png1242×426 80.5 KB

9

The code i gave you above, I am attaching the screenshot below, please set the top to 39px only.

websensepro_0-1737466128122.png
websensepro_0-1737466128122.png1297Ă—395 110 KB

websensepro_1-1737466238335.png
websensepro_1-1737466238335.png1297Ă—395 113 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

1 Like
10

@Lars_Veldman

Please mark all my solutions and like them as well.

1 Like
11

Thanks for the great help!