How to pin announcement bars even while scrolling in dawn theme?

Store Design
, ,

Topic summary

Issue: User needed to make announcement bars remain fixed at the top of the page during scrolling in the Dawn theme.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Theme → Edit code
  • Locate the CSS file (base.css, theme.css, styles.css, or theme.scss.liquid)
  • Add the following CSS code at the bottom:
.announcement-bar-section {
    position: sticky !important;
    top: 0;
}

Outcome: The solution was confirmed to work perfectly by the original poster. The fix uses CSS positioning to keep the announcement bar visible while scrolling.

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

How do I pin or freeze all announcement bars on top of the page even while scrolling or moving to different pages? Please refer to attached images.

Website URL: https://adlaudemdei.com/

freeze.png
freeze.png1900×834 276 KB

2

Hello @pmltntc

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

1 Like
3

Hi @pmltntc ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.announcement-bar-section {
    position: sticky !important;
    top: 0;
}
.announcement-bar-section:has(.announcement-bar-slider) {
    top: 38px;
}

Here is result:

BSSTechVenture_0-1717379963904.png
BSSTechVenture_0-1717379963904.png1919×880 314 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
4

Thank you! This worked perfectly!