How do I make a Transparent Header

[SoulHarvest]

Hi, I'm trying to make a header like the one on the https://fearofgod.com/ website. It's transparent with a slideshow behind it, then it turns white when scrolling and it is sticky. Also, this is only on the homepage, the header is sticky and white on every other page.

I've found some discussions about this online but none of them worked.

Does anyone know how to do this? I'm using the dawn theme 15

[BSSCommerce-HDL]

Hi @SoulHarvest, Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

[SoulHarvest]

Hi, Thank you for the help. my site is https://soulharvestshop.com and the password is thiagh 

I followed some old tutorials and did manage to make the header transparent, but it doesn't become white on scroll, and it doesn't sticky. so it's just transparent at the top. Because of that I've just undone all of it and reverted to a standard header with no CSS or anything. I have no CSS/HTML/JS experience so that's why I've been looking and asking for help on these forums. 

[BSSCommerce-HDL · Accepted solution]

Hi @SoulHarvest, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[SoulHarvest]

Thank you! This worked exactly like the fearofgod site, thank you for your help!

[BSSCommerce-HDL]

@SoulHarvest, No problem. Have a good day 😍

[SoulHarvest]

Edit: Just a note for anybody else seeing this and wanting to try it. This works on PC and android perfectly, it seems to bug out on iOS, not sure quite why (I've tried it on safari and brave browser on an iphone, the header is transparent and becomes white but it doesn't sticky properly, it jumps around while you scroll)

[BSSCommerce-HDL]

Hi @SoulHarvest, i can't access your site

[SoulHarvest]

Hi, I've changed the password to 123bird 

[BSSCommerce-HDL]

Hi @SoulHarvest, Replaced my old code with this new code: 

<style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
    top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[SoulHarvest]

Hi, I'm sorry for asking so many questions. I've tried this code and it does now work on ios also but I wanted to ask if there is a solution for this issue where the header covers stuff below it, i've attached a screenshot to show what i mean. The header goes a bit too low on both desktop and mobile, I understand if you are not able to help with this as you have already helped a lot! Thank you so much for everything anyways.

 

[BSSCommerce-HDL]

@SoulHarvest, Do you think we should only make the home page transparent? It would be better if we made all the pages whole. I see many guest websites only do it on their homepage

[SoulHarvest]

Yes I think only having that effect on the homepage would be good, so every other page has a normal sticky header.

[BSSCommerce-HDL]

@SoulHarvest  Okay. So now I will give you the solution wait for me a moment. Thank you 😍

[BSSCommerce-HDL]

Hi @SoulHarvest, Replaced my old code with this new code: 

{% if template.name == index %}
    <style>
  .shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
    position: fixed !important;
    background-color: transparent !important;
    max-width: 100%;
    width: 100%;
    border-bottom: 0;
    top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: white!important;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[SoulHarvest]

Hi, I've added this code now but the effect has disappeared from the home page also, did I make a mistake? I pasted it in the theme.liquid file, here's a screenshot of my file: 

 

[BSSCommerce-HDL]

Hi @SoulHarvest, Insert this code above </head> tag: 

[SoulHarvest]

Hi, is this correct ? I've added this code in the section you mentioned but it doesn't work

{% if template.name == index %}
<style>
.shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper {
position: fixed !important;
background-color: transparent !important;
max-width: 100%;
width: 100%;
border-bottom: 0;
top: 0 !important;
}

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
background-color: white!important;
}
</style>
{% endif %}

 

[BSSCommerce-HDL]

Hi @SoulHarvest, 

Can I send a collaborator access to your theme? Then I can check and directly add code to help your issue.

Please share your collaborator request code from the Users and permissions page.

[SoulHarvest]

The collaborator request code is 3605

[BSSCommerce-HDL]

Hi @SoulHarvest, 

We have just sent you a collaborator request to Shopify Admin => Settings => Users and Permissions => Collaborators => BSS Commerce to have access and check your settings. Then, we can check and suggest you something. After accepting the request, please kindly keep me updated.

Thanks so much in advance!

[SoulHarvest]

I've accepted the request and gave permission for the theme

[BSSCommerce-HDL]

Hi @SoulHarvest, i fixed it, I forgot the two single quote in the word index because it should be a string.  My bad 😔

[SoulHarvest]

I have just checked the website and it seems you have added the feature like the fearofgod.com website, I have to go for now, but when i return I will donate to you for your help, thank you so much, genuinely

[BSSCommerce-HDL]

@SoulHarvest  Thank you so much. Have a good day 😍

[MRamzan]

Transparent header:

[MRamzan]

You can make your header transparent: