Making header invisible, merging it with image banner

[washed]

With the new ride update my previous code to make the header transparent no longer works. 

This was the previous code: 

{% if template == 'index' %}

<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>

{% endif %}

What I want:                                                                                     

 

Current:

PLEASE HELP

[Dan-From-Ryviu · Accepted solution]

Hi @washed 

You can try to use this code 

<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>

{% endif %}

Change -90px to make it fit with height of your header

[BSSCommerce-HDL]

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

[washed]

washedclothing.com

[Dan-From-Ryviu · Accepted solution]

Hi @washed 

You can try to use this code 

<style>
.header-wrapper{
background: transparent !important;
}
#MainContent {
margin-top: -90px;
}
</style>

{% endif %}

Change -90px to make it fit with height of your header

[washed]

Thank you for the response Dan, I was wondering where I should put this code, I cant wait to try it!

[washed]

is there anyway to only have it as an invisible header on the homepage

because it is glitching on my other pages                                       

 

 

[Dan-From-Ryviu · Accepted solution]

Please use this code

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

[washed]

Thank you!

[Dan-From-Ryviu]

Very welcome!