Solved

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

pmltntc
Excursionist
28 0 13

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

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
747 246 255

This is an 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: 

BSSTechVenture_0-1717379963904.png

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

PageFly-Amelia
Shopify Partner
461 145 208

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

BSSCommerce-HDL
Shopify Expert
747 246 255

This is an 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: 

BSSTechVenture_0-1717379963904.png

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
pmltntc
Excursionist
28 0 13

Thank you! This worked perfectly!