Sticky header and announcement bar when scrolling up

Store Design

Topic summary

A user seeks help implementing a sticky header and announcement bar on their Symmetry theme store that only appears when scrolling up (not down).

Proposed Solutions:

  • One responder offers to provide custom JavaScript and CSS code, requesting details about the header structure and confirmation that custom code implementation is acceptable
  • Another suggests referencing an older blog post with relevant code examples and implementation steps (shared via screenshot)

Current Status:

  • The original poster has shared their store URL (thefurrypawprint.com) and confirmed they’re comfortable working with custom code
  • The discussion remains open, awaiting specific implementation guidance or code snippets from the helpers
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

3

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

IMG_4133.jpeg
IMG_4133.jpeg1125×931 70.2 KB

4

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