Announcement and Transparent Header inquiry

Store Design
, ,

Topic summary

A user seeks help implementing a transparent header that:

  • Appears only on the homepage
  • Transitions to a sticky header when scrolling
  • Works on both desktop and mobile devices

Previous community code solutions have failed, either:

  • Only functioning on desktop without sticky behavior
  • Not working on mobile
  • Applying transparency across all pages instead of homepage only

Additional request: Reduce announcement bar font size for mobile view.

Theme: Refresh

Status: A community helper has responded, requesting the store URL and password to provide customization assistance. The issue remains unresolved and awaiting further collaboration.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am looking to add a Transparent Header in Homepage only that transitions to sticky header upon scrolling down and only applies to homepage and is optimized for mobile view as well. I have tried different codes that was shared in the community but it either only works on Desktop view with no sticky header post scrolling, it doesn’t work on mobile view or it is transparent on all pages. Please help!

I would also want to reduce the font size of my announcement bar for mobile view.

The theme I am using is Refresh theme

1 Like
2

Hey @AstroAthetics,

Thanks for posting this to Shopify community.

Could you please share your store url along with the password [If applicable] so that I can take a look into it and do the requested changes.

Thanks

3

Hello,

Thanks for the prompt response. I am working on re-designing my store, where the updated version of the refresh theme removed the old code of the transparent header, so I would like a new code for that. And also, the announcement font size reduction

URL: www.astroathletics-eg.com