How to make sticky header black?

Store Design
, ,

Topic summary

A user needed help making their store’s sticky header turn black when scrolling down, instead of remaining gray on pages other than the homepage.

Initial Problem:

  • The transparent header wasn’t changing to black background on scroll across all pages
  • Store URL: corbie.store

Resolution:

  • Multiple users confirmed the header was already working on some pages (shown via screenshots)
  • The issue was isolated to non-homepage pages where the header remained gray
  • A solution was provided involving custom CSS code

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open theme.liquid file
  3. Insert provided CSS code before the </head> tag

Status: Resolved - the original poster thanked the contributor, indicating the CSS solution successfully fixed the sticky header behavior across the entire website.

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

I need to make sticky transparent header black if scrolled down

My store - corbie.store

1 Like
2

Hi @Somehow999 I see i worked

LizHoang_0-1740705280316.png
LizHoang_0-1740705280316.png1282×1040 221 KB

3

Hi @Somehow999

I see it already transparent and black background when scrolling down.

4

Hi @Somehow999 Do you want the header like this across the entire website?

topnewyork_0-1740730748910.png
topnewyork_0-1740730748910.png890×102 13.2 KB

5

Yes but it’s gray on any other page

6

Yes man

7
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

1 Like
8

Thank you so much

1 Like