Transparent header at top and solid header on scroll

[daddysnack]

Hi I have been trying to get my header to behave exactly like this one here: https://www.updraft.com/

I want it to be transparent at the top of the webpage, but when you scroll down there is a solid colour on all devices. When I set my header to transparent the background of the header still appears white but the header is transparent on scroll. I am not sure what I am doing wrong?

Please help! My staging site is:

https://darkcyan-butterfly-327835.hostingersite.com/

[Ismael]

Hello @daddysnack,

Thank you for the inquiry.

There is no option for this by default, but in Theme Options > Options > Stack Options, you can set the Navbar Background to transparent. Then, add the following css code to restore the default background on scroll.

.x-navbar.x-navbar-fixed-top {
    background-color: red;
    transition: all 1s;
}

Let us know the result.

Best regards,

[daddysnack]

Hi there unfortunately that didnt work for me I feel like there is something overriding the code. The instructions you have given me shows me a clear header on scroll but when at the top there appears to be a white header or whitespace.

At the top:

On scroll:

[Ismael]

Thank you for the update. You may need to apply a negative top value (e.g -80px) to the Hero section to pull it upward beneath the header.

If you need more assistance with this type of customization, we recommend exploring our One service for more hands-on support.