Sticky header and announcement bar when scrolling up

[Lars_Veldman]

Hi,

Is there someone who can help me with my symmetry theme?

I want to make the header and announcement bar both sticky but only when scrolling up.

Kind regards,
Lars

[rajweb]

Hey @Lars_Veldman ,

I can definitely help you with that! You’ll need some custom JavaScript and CSS to make the header and announcement bar sticky only when scrolling up.

If you can’t share your store URL here, you can describe your current header setup—whether it’s a single div or separate elements for the announcement bar and header. Also, are you comfortable adding custom code in the theme?

Let me know, and I’ll guide you through it!

Thanks

[Lars_Veldman]

Thank you! my url is https://thefurrypawprint.com/
Custom code is no problem 🙂

[Bundler-Manuel]

Hi there Lars @Lars_Veldman  I came across this old blog post which has a lot of codes (not sure how effective they will be right now) but the steps and explanations in the guide will definitely still be relevant today, so you can have a look at it by searching for the article in this picture I share