Design question of the header

Store Design
1

螢幕截圖 2026-05-28 下午10.24.07
螢幕截圖 2026-05-28 下午10.24.071920×273 137 KB

I would like to know if the header can turn white again when I scroll down.

Grateful for any help, thank you!

2

Hi @k3k3k3

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

kwa-e.com

5

Use this code in Theme settings-> Custom CSS:

.scrolled-past-header sticky-header {
  background: rgb(var(--color-background));
}

sticky-header {
  transition: background 0.3s linear;
}
6

May also try this – will also restore background if header is hovered over or has a drop-down open:

.scrolled-past-header sticky-header,        /* when scrolled */
sticky-header:hover,                        /* when hovered */
sticky-header:has(.header__menu-item[aria-expanded="true"]) { /* when drop-down is open */
  background: rgb(var(--color-background)); /* reset background */
}

sticky-header {
  transition: background 0.3s linear;
}