How can i make just the home header transparent on Craft Theme?

[esbasics]

Hi, we are using the ‘craft theme’ for our Shopify store and we are wondering if anyone can help us in making our HOME PAGE header transparent.

When we go to header settings there is no option for a transparent header like there is for other themes.
We only want our header to be transparent when users are at the top of the home page and then when they scroll down we want the header to become normal with a fade effect, like in the Spark theme.
Any help would be greatly appreciated!

@LitExtension

@Zworthkey

[Sheesh_b]

Hi @esbasics

This depends on how you customized your website. It’ll be good for us to share the solution if you share your website link here.

Thanks

Sheesh

[esbasics]

The website is locked with password. But here you have a screenshot of the home page.

If you need something more, please let me know.

Thanks!

[Sheesh_b]

Hi @esbasics

And then share the link.

[esbasics]

https://wql4tlg6czh343mq-62201692347.shopifypreview.com

There it goes! I didn’t know that.

[Sheesh_b]

Hi @esbasics

Good, you got that.

Now, the issue is after making header transparent using your header position as fixed the header got distort.

But, a possible solution you can try.

Copy below code and paste either into theme.liquid file after

or the css file which must be in asset folder.

#shopify-section-header {
	position: fixed;
	width: 100%;
	background: transparent;
}
#shopify-section-header .transparent-header {
	background: transparent;
}
#shopify-section-header.shopify-section-header-sticky .transparent-header {
	background: #000000;
}
#shopify-section-header.shopify-section-header-sticky {
	position: fixed;
	width: 100%;
}

Thanks

Sheesh

[esbasics]

Thank you so much!

Is almost ready, but i dont know if we can fix this three things.

1. When you scroll down the navbar disapears without any fade and doesnt look smooth.

2. In mobile when you open the menu in the top of the home page the menu doesnt match with the transparency of the navbar.

3. In other pages of the web the navbar becomes transparent, could be posible to make it transparent only only in the home page?

Thanks so much!

[Sheesh_b]

Hi @esbasics

Try below code only in theme.liquid file just after

{%- if template contains 'index' -%}
    #shopify-section-header {
	position: fixed;
	width: 100%;
	background: transparent;
}
#shopify-section-header .transparent-header, #shopify-section-header .transparent-header .menu-drawer {
	background: transparent;
background-color: transparent;
}
#shopify-section-header.shopify-section-header-sticky .transparent-header, #shopify-section-header.shopify-section-header-sticky .transparent-header .menu-drawer {
	background: #000000;
}
#shopify-section-header.shopify-section-header-sticky {
	position: fixed;
	width: 100%;
}

    {%- endif -%}

[esbasics]

Yes!! Now is only in the homepage. We really apprecciate it.

Lastly would be any way to make a disappearing fade out of the navbar when you scroll down?

[Sheesh_b]

Hi @esbasics

I’m sure that it is not working at your end, but, it’s working here. No issue with the image and the text on the image as well.

You can remotely check your website on this website, https://www.browserstack.com/

Thanks

Sheesh

[MRamzan]

In your craft theme you can add transparent header:

How to Make Transparent Header in Shopify | Latest