How can I add a transparent header to my website (homepage only) but keep my sticky header solid?

[mackk]

I’m using the origin theme – When I tried this before I was able to get my header to be transparent, but I ended up removing the code because the logo continued to stay on the screen even when scrolling (i only want the sticky header when scrolling up, and I prefer to keep it solid). The other issue I was having was how it appeared on mobile. When the header was transparent, the logo disappeared completely in the mobile version.

Can anyone help me with the proper code I should be using?

Thanks in advance.

website: takehearttextiles.com

password: textiles2023

[shreyhweb]

@mackk

Hello,

you can use below code above in theme.liquid.

{% if template== ‘index’ %}

@media screen and (min-width: 768px) { .section-header .header{ background: transparent!important; position: absolute; width: 100%; } .section-header.shopify-section-header-sticky .header{ background: #fff!important; position: fixed!important; top:0; } }

{% endif %}

this code for only desktop and if you want to make for mobile than you need to develop custom coding. so you can hire a developer for do it this.

if you want to discuss further information then you feel free to contact us.

thankyou

[mackk]

thank you!!! this is exactly what I needed

[chelux]

What if there’s no tag — same theme

[shreyhweb]

@mackk

If our solution helpful for you then please tap to like button and if you want to any help or further discussion about your store than you feel to free contact us with mail or whatsapp.

Thankyou