Sticky announcement bar on Symetry theme

[Lars_Veldman]

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.

[topnewyork]

Hello,
Please share "Store URL" 
Thanks!

[Lars_Veldman]

Hi, the url is:

Refined-melbourne.com

[topnewyork]

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 </head>

<style>
.announcement-bar .container {
    position: sticky !important;
}
</style>

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

[websensepro]

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:

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! 🚀 (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!

[Lars_Veldman]

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?

[websensepro]

@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;
    }
}

[Lars_Veldman]

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.

[websensepro · Accepted solution]

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

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! 🚀 (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!

[websensepro]

@Lars_Veldman 

Please mark all my solutions and like them as well.

[Lars_Veldman]

Thanks for the great help!