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

[pmltntc]

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/

[PageFly-Amelia]

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

<style>
.announcement-bar-section {
    position: sticky;
    top: 0;
}

</style>

Step 3: Add code above </head>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[BSSCommerce-HDL · Accepted solution]

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: 

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 😍

[pmltntc]

Thank you! This worked perfectly!