Sense theme transparent header, except when on scroll up.

[biszark]

I need my header to basically look exactly like the one on shopazva.com on the sense theme. Right now, the header is not transparent. Also I need the color scheme of the text and logo to change from white on the transparent header, to black with a white background on sticky header. I know this is a lot but if someone can make this work I would be so grateful. My website for reference is rayn.industries

Thank you!

[Sangeetanahar]

hello @biszark 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->theme.liquid...> Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 767px) { 
header.header {
    width: 100%;
    background-color: transparent;
    position: absolute;
}
{% if template == 'index' %}
   ul.list-menu.list-menu--inline li a {
    color: white;
}
{% endif %}

}
</style>

If this was helpful, hit the like button and accept the solution.
Thanks

[biszark]

Is there a way to do this only on the home page? Also, add a white background, and change text (as well as cart, search, and account button) to black when not on the top of the page?

If you look here https://rayn.industries/collections/tees the header is still messed up.