Make header transparent and solid on scroll

[Andia]

how can i make the background transparent but solid when i start scrolling?

www.andiacollective.com.au

[niraj_patel]

Hello @Andia 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.gradient {
background: transparent !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Andia]

there is an overlap now

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

.header {

   padding-top: 40px !important;

}

</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Andia]

when i scroll i dont want this extra space. is there a way to get rid of it?

[niraj_patel]

It look fine 

[Rahul_dhiman]

Hello @Andia 
Go to online store ---------> themes --------------> actions ------> edit code-------> base.css --- add at the very end of the file.

@media screen and (min-width: 990px) {
    .header {
        padding-top: 30px;
    }
}

adn the result will be

let me know if this solved your purpose.
Thanks

[Andia]

this didnt seem to work! still overlaps

[Andia]

<style>
sticky-header.header-wrapper {
background: transparent;
position: fixed;
top: 0;
left: 0;
right: 0
}

</style>
<style>

.scrolled-past-header * {
background: #F2F3EE !important;
}

this is the code i used so that the header is transparent and then goes solid when scrolled

[Rahul_dhiman]

Please check the screenshot