Sticky header has no color when scrolling

[Daniel19901]

Hi, for some reason my header became transparent for stick mode (while scrolling) as well. Can anyone help me set a color as background when scrolling ? 

It is not from the settings.. not sure what happened. It was fine until now 

https://cbh9cs8hom6nk645-75482267975.shopifypreview.com

[BSSCommerce-HDL]

Hi @Daniel19901, Pls insert this code to your file css: 

body:has(.scrolled-past-header) sticky-header.header-wrapper {
   background-color: #e5d9d9 !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Daniel19901]

@BSSCommerce-HDL thank you so much!! which css file should i add it to ?

[BSSCommerce-HDL]

Hi @Daniel19901, Search file base.css ,theme.css or style.css. After, let's try add it

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[conversionist]

Hi! You can fix the transparent header issue in sticky mode by adding some custom CSS. Here’s how:

1. Go to Online Store > Themes > Actions > Edit Code
2. In the Assets folder, open your theme.scss.liquid or theme.css file.
3. Add this code at the end

.header--sticky {
    background-color: #yourcolor !important;
}
​

Replace #yourcolor with your desired background color code

Save the changes and refresh your site to see the effect This should set a background color for the sticky header