How can I make a transparent header that isn't sticky?

[INFRA]

Hi there,

I made a transparent header, but I don't want it to be sticky. How do I disable this? When I do this in the editor, the transparency doesn't work anymore.

I used the below code for the transparent header which I guess makes it a sticky header. Can I just use code for only the transparent bit?

sticky-header.header-wrapper.color-background-1.gradient {
     position: absolute;
     left: 0;
     width: 100%;
     background: transparent;
}

website

password: meifay

[vpsbohra]

Hi @INFRA 

First please remove sticky header 
Then use this css

.header-wrapper.color-background-1.gradient {
     position: absolute;
     left: 0;
     width: 100%;
     background: transparent;
}

Remove sticky class from the code.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[Dan-From-Ryviu · Accepted solution]

Hi @INFRA 

Please disable sticky option in your theme editor, remove code you added and then add this code to your theme.liquid file 

<style>
.shopify-section-group-header-group .header-wrapper { 
    background: transparent !important; 
}
{% if template == 'index' %}
#MainContent { margin-top: -135px !important; }
{% endif %}
</style>

[INFRA]

hi @Dan-From-Ryviu  this worked, thank you!  It's just on mobile the h2 text is too high up.

I tried to use below code but it's not working, is there anything else I can try?

@media (min-width: 768px) {
  h2 {
    font-size: 30px;
    padding-top: 100px;
  }
}

[Dan-From-Ryviu]

You already fixed. Awesome

[Anshul_arora]

Hello @INFRA ,

I have looked through your store https://top-squad-soccer-academy.myshopify.com and can assist you in resolving your issue.

Please follow the below mentioned steps for making the header non-sticky -:

Steps-:

1. Go to Online Store -> Themes-> Click Customise https://prnt.sc/qeo24Oc3D8z_

2. Now, click on Header https://prnt.sc/0Qv_R2ABuM-h  , then Header section option setting will appear, scroll down at the end and click custom css https://prnt.sc/Rp536rpbvvgM

3. Next, add the below mentioned code in the this section https://prnt.sc/Z5c55s52eYkK

.header-wrapper.color-background-1.gradient {
position: relative;
left: 0;
width: 100%;
background: transparent;
}

4. Save

Output = Header appear in store https://prnt.sc/wTcXJx5JvR5s , while we scroll down, it will not appear https://prnt.sc/X3L2AcHCKwZ6 

I hope it helps.

Please let me know if you need any assistance.

Thank you.

[INFRA]

hi @Anshul_arora  this does not work, unfortunately. Is there another code that can be used?

[MRamzan]

Here is the way to make it transparent but not sticky: