Change colour of header when scrolling from white to black.

Store Design
, , , , , , ,
1

Hi There,

My website is https://cabaneofficial.com/

I would like to change my header colour when scrolling from white background with black writing to black background and white writing.

Or, keep the white background but change the logo when scrolling from the white one I have now, to a black logo when I scroll down - image link for black logo is - (https://cdn.shopify.com/s/files/1/0850/1084/1947/files/OFFICIAL_400_x_160_px_3_1d492b52-7dae-45ad-b95a-b0e3d5b1cda6.png?v=1739006037)

Thank you!

2

Hi @CBOfficial ,

Try adding this CSS to your page (the process to add custom CSS is outlined here).

.mega-menu[open] .mega-menu__content,
.scrolled-past-header .header-wrapper {
    background-color: black !important;
}

.scrolled-past-header .header-wrapper * {
    color: white !important;
}

This will change the text to white and the banner background to black for the “scrolled down” state.

3

Hi CBOfficial

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
.scrolled-past-header .header-wrapper * {
    color: #fff !important;
    background: #000 !important;
}

Result:

LizHoang_0-1739014319597.png
LizHoang_0-1739014319597.png837×338 391 KB

Best,

Liz

4

Hi Liz,

Thank you very much! Is there a way I can change all my header, other than my landing page, to be black and writing white?

Thank you,

Nath

5

Can you share detail image?

6

CBOfficial_0-1739021991030.png
CBOfficial_0-1739021991030.png2490×1120 136 KB

Such as this, the header you cant see the logo so the header being black with white writing on all pages would be better.

Or is it possible to change my logo to black when I scroll across the whole website and leave all headers white?

7

It is an image, so the color cannot be changed. You can choose an image that fits better with the store.

8

Ok.

Is it possible to have the header transparent (Homepage only) and when I scroll it turns black AND on all other pages the header is permanently black?