How to remove white background from overlay header

Topic summary

Issue: In the Flex theme, an overlay header displays a persistent white 75px bar/margin at the top. The header is otherwise transparent and sticky; adjusting opacity to 0% and enabling Overlay in theme settings did not remove the space. A URL and password were provided for reproduction.

Proposed fix: Add custom CSS via Online Store > Themes > Customize > Theme settings > Custom CSS: “@media (max-width: 749px) { .index-sections { margin-top: -75px !important; } }”. This media query targets mobile screens and applies a -75px top margin to the homepage sections to offset the extra space.

Notes: A screenshot was shared to show where to place the CSS. The solution specifically addresses mobile (≤749px) and does not mention desktop behavior.

Status: No confirmation from the original poster yet; outcome unresolved.

Summarized with AI on December 16. AI used: gpt-5.

Hello,
I can’t find a solution to remove the white bar behind my header, I tried pretty much everything I could think of and find my myself, header seems to be transparent, works well with the sticky feature, but there is a 75px margin that I can’t get rid of…

I think I did everything properly in the theme customization part, setting opacity to 0% everywhere and enabling Overlay, went trough it several times…

https://www.raven-customs.com/
pw: ZaeyDrip
Flex theme

thank you so much for helping me

Hi @Zaey

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.index-sections { margin-top: -75px !important; }
}

1 Like