Debut Transparent Sticky Header

Highlighted
Excursionist
13 1 2

Hello, I want to add a sticky header that adds a white box when the page is scrolled down, and when you land on the page it is transparent.

Also, is there a way to change the color of the icons when the box shows up? I'm going to be adding an example of a website that does the exact same thing I'm asking for.

 

My Website: shopstateofmind.com

Example website: lakenzie.com

 

Thanks,

Mahed Ali

1 Like
Highlighted
Shopify Partner
7627 1050 2648

Hello, @STATEOFMIND 

Welcome to the Shopify community!
and Thanks for your Good question.


1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.Header {
background: rgba(255, 255, 255, 0.7); /* change values as you like opacit = 0.7*/
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
13 1 2

Hello, @KetanKumar 

I tried using the code but it didn't work can you please help me further?

 

Thank you,

Mahed Ali

0 Likes
Highlighted
Shopify Partner
7627 1050 2648

@STATEOFMIND 

oh sorry for that i will provide this code your example site your site it requires to more customization 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
13 1 2

Ok @KetanKumar thank you so much for your help!

0 Likes