How Do I make the Announcement Bar and Header Scroll at the same time if both are Sticky Dawn Theme?

Hi,

I have already made my header navigation menu bar sticky. It scrolls just fine and does what I need it to do. However, I implemented code to make my announcement bar sticky too. They both scroll at the same time, but unfortunately, they’re not in sync. There is a gap. How do I adjust the code to make them scroll together and be connected rather than separated?

This code makes the announcement bar sticky. I added it at the footer of the base.css

/* Sticky announcement bar */

#shopify-section-announcement-bar {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 10;

}

#shopify-section-header {

padding-top: 38px;

top: 30px;

}

1 Like

+1 also interested

@Fantasy

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi, @KetanKumar

Thank you for assisting. I also need to make it look good on mobile devices. My website is Melanin crown