Sticky announcement bar covers sticky header when scrolling

Store Design
, ,
1

So I’ve made my announcement bar sticky using this code:

#shopify-section-sections–18223735800099__announcement-bar {
position: sticky !important;
top: 0;
}

The problem is that when I scroll down, the announcement bar covers a bit of my header, which is also sticky. This makes it hard to click on the menu when on mobile. It also doesn’t look great. Here is a link to by site just in case you want to see what I mean: https://nuvocollection.com/

I would really appreciate some help with this as it’s driving me crazy!

2

Hey @Theo_Bee

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1703941312524.png
Moeed_0-1703941312524.png1903×877 183 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Amazing - thank you so much :slightly_smiling_face: I was trying for ages to fix that!

Really, really appreciate your help!

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like