sticky header background color

Store Design
1

Hello as you can see my header sticky is transparent. I would like it to be fully black. I can’t change the header color in my customization area.

thank you

here’s the preview https://arkived.store/

2

Yes I can see when I scroll doen then your store header become transparent. In order to add the black background the you have to paste this code in the end of base.css file. Here is how you can find base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

sticky-header.header-wrapper.color-.gradient {
    background: black !important;
}

Results:

Results are amazing.

thescriptflow_0-1744065871273.png
thescriptflow_0-1744065871273.png1903×473 238 KB

Let me know if you need more help.

Thanks

3

Hi @consumed

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

header.header.header--top-center.header--mobile-center.page-width.header--has-menu {
    background: #000 !important;
}

Best,

Daisy

Result

DaisyVo_0-1744073981607.png
DaisyVo_0-1744073981607.png1909×876 129 KB

4

Hi there thanks for sharing the preview. I see what you mean the sticky header is staying transparent when you scroll, which makes it hard to see depending on the background.

Since the customization area doesn’t give you control over the sticky header color, this usually means we’ll need to add a bit of custom CSS to fix it. You can try adding something like this inside your theme’s custom CSS section:

This should force the sticky header to stay black when scrolling. If your theme uses a different class for the sticky header, it might need a slight adjustment, but the general idea stays the same.

If you’d like, we can take a look into it together, happy to help.