Change Mobile White Bar Above Header to Black on Homepage Only (Fabric Theme)

[CoverArt1]

Hi everyone,

I’m using the Fabric Shopify theme and I’m trying to change the white bar above the header on my homepage only.

I’ve already tried many CSS rules in base.css and in Custom CSS (targeting .template-index, .header, .header-wrapper, .shopify-section-header, and even pseudo-elements), but none of them have any effect.

Here’s a screenshot of the issue (white bar at the top of the homepage):

My goal:
Make white top bar on mobile black
Only on the homepage, not on other pages

I suspect the Fabric theme might be using a special container, overlay, or gradient that’s not being targeted by standard selectors. It could also be injected by Liquid, and may require identifying the correct section wrapper.

Does anyone know:

1. Which exact HTML element in the Fabric theme controls that top white bar?

2. The correct selector to override it only on template-index?

3. Whether this is controlled by a specific section or setting in the theme code?

Any help or pointing me to the right file/section would be greatly appreciated. I’ve tried quite a few approaches and nothing is changing the bar color at all.

Thanks in advance!

[devcoders]

Hi @CoverArt1

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

[EmiliaFuller]

Hi @CoverArt1, for Fabric theme the top mobile bar is usually inside a div with a class like .header-top or .announcement-bar. You can override it only on the homepage using this CSS in your Custom CSS section:

.template-index .header-top {
background-color: #000 !important;
}

If that doesn’t work, inspect the element in mobile view to find the exact container class—it may be a pseudo-element or gradient applied via Liquid. Once you identify it, prefix it with .template-index to target the homepage only.

[tim_1]

What white bar are you talking about?
The one with time and battery indicator?

This is not part of your site, you can’t really control it (usually).

Or am I missing something?

You vs Apple

[Justas_AugmentStudio]

Hey @CoverArt1,

exactly what time said. Even though it might look like part of the shop’s design to non-technical folk, good news is it’s just your mobile Status Bar that is controlled by your device’s display settings (light vs dark, see below)

[CoverArt1]

Hi Devcoder, thanks for your reply. Its: www.coverart.nl

[CoverArt1]

Hi Emilia, thanks for the reply. This didn’t work sadly

[CoverArt1]

Hi Tim, thanks for your reply! Yes that ‘white bar’! Well that could be the answer

[CoverArt1]

Hi Justas, thanks for your reply aswell! Well that solves my issue then I guess. But thanks anyways @all

[Maximus3]

@CoverArt1 you can actually change the color of the browser’s address/status bar with theme code.

How can I alter the color of my browser's URL field?

Hi, I would like to change the color of this part, at the moment it’s green… I guess because the primary button color is green. Is there a way to make it happen ? [IMG_20220915_163402.jpg]

[tim_1]

Interesting, but compatibility seem to be limited:
https://caniuse.com/?search=theme-color