How do I make a transparent, sticky header that changes color on scroll?

[luxurylure]

I have made my header transparent, but it won't stick. I'm trying to make my header stick, my logo the same colour as the other icons, and change the colour of the header as I scroll down the website. Can anyone help please?

[luxurylure]

@LitExtension @PageFly-Kate @PageFly-Victor 

[PageFly-Victor]

Hi @luxurylure 

Can you help me share the store URL and password? thank you.

[luxurylure]

@PageFly-Victor 

luxurylure.co.uk

password: oochee

[luxurylure]

Hi @PageFly-Victor 

luxurylure.co.uk

password: oochee

[PageFly-Victor]

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>
header#site-header {
position: fixed;
width: 100%;

}

use {

    color: white;

}

.header__icon{

color: white;

}

</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[luxurylure]

Hello @PageFly-Victor I added that code and my header sticks now thank you, but on my header the logo is still the same colour of my text instead of being the same colour as my icons. And I don't want my header to be transparent when I am scrolling. Would you be able to help me with this please?

[PageFly-Victor]

@luxurylure , I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.