How can I make my website header stay transparent when scrolling?

[JoeyRoo]

Hi,

When I scroll down through the slideshow on my page, a Black bar appears in the Header under the Logo and Menu. Is there a way to change this so the Header stays transparent and the Black bar only appears when the mouse rolls over it?

Site is theothelabel.com

Thanks in advance!

[Dan-From-Ryviu]

Hi, you can try to add this code to your theme.liquid before tag and check

[ZenoPageBuilder]

Hello @JoeyRoo

Inside Shopify Admin, you can go to Edit theme code, open file app.css and add this code at the bottom

#header::before {
    background: transparent;
}

#header:hover::before {
    background: var(--color-header-bg, #fff);
}

The result

On hover

Hope that helps!

[JoeyRoo]

This works in keeping the header transparent, but is there a way to make the black background in the header appear when I hover the mouse over? It only does this on the first slide, but not on any of the other slides.

[JoeyRoo]

This works perfectly thank you. I have one more request, which may be a little more complex. If you scroll towards the bottom of the page the image is white so the Logo and Menu can not be seen. Is there a way to make the Black background in the header automatically come up for this part of the page only? So it will remain transparent for the other pages, but will automatically show on this page so the Logo and Menu can be seen clearly.

[ZenoPageBuilder]

You can add this code right before in the file theme.liquid

[JoeyRoo]

You’re a lifesaver! Appreciate the help

[ZenoPageBuilder]

You are very welcome

[HELDERWRLD]

Hello @ZenoPageBuilder ,

Can you show me how can i do on my website?

https://diversusoficialsite.myshopify.com/

pass: diversusoficial

[ZenoPageBuilder]

Hello @HELDERWRLD

Do you want to make this menu transparent?

[HELDERWRLD]

Yes, but i want it to be white when i roll down and when i hover the mouse

[ZenoPageBuilder]

Your theme menu can only be transparent when scroll down

And white by default

Do you want to do this?

[HELDERWRLD]

It’s not possible to make it transparent by default?

[ZenoPageBuilder]

It is possible to make it always semi-transparent like this

Do you want this settings?

[HELDERWRLD]

Hello @ZenoPageBuilder

Already found a way to make it transparent. Can you help me to make it default when i scroll back up

And also help me make my hamburger menu cover the header on mobile and desktop? i don’t want my header to be semi transparent when i open my menu

[ZenoPageBuilder]

You can add this code to make it to white when scrolling upward (still transparent when scrolling down)

.shopify-section-header-sticky:not(.shopify-section-header-hidden) .header-wrapper {
    background: var(--gradient-background) !important;
}

I was checking for the menu issue, however, I couldn’t access your store, even though I tested on a new device and still had the same error for the first visit. Not sure if you are using an app to block traffic, or if this was just a temporary issue.

[HELDERWRLD]

Hello @ZenoPageBuilder

It worked, do you know if it’s possible to make the header appear smoother when i scroll upwards? ex: https://representclo.com/

I don’t know what happened, but you try again please? I don’t think i have an app that blocks it. I also noticed my admin portal was way too slow yesterday, i couldn’t even send a message for the shopify team for help

[ZenoPageBuilder]

I think we can only find an option in the theme to change how the header appears. I can not add some CSS code to adjust it.

About the issue, I also got reported from the clients about slow responsiveness in Admin, sometimes it happened that the clients couldn’t open the app. So maybe it is just a temporary issue and hopefully will be resolved soon.

[HELDERWRLD]

Hello, i think it’s back working fine, can you check again please to help me with the hamburger menu?

[ZenoPageBuilder]

You can add this code

.header__icon {
    z-index: 9999;
}

#menu-drawer {
    transform: translateY(-60px);
    padding-top: 32px;
}

The result