Debut Transparent Sticky Header

STATEOFMIND
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

KetanKumar
Shopify Partner
16942 1852 6343

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
STATEOFMIND
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
KetanKumar
Shopify Partner
16942 1852 6343

@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
STATEOFMIND
Excursionist
13 1 2

Ok @KetanKumar thank you so much for your help!

0 Likes

@STATEOFMIND 

Although it's not fully transparent, I have coded a professional, highly tested solution for this if you'd like to try.

You can download/install it for free under 1 minute, just click here to read the tutorial.

Besides that you also have options to turn it on/off at the customize page.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire a reliable Shopify developer? Same day response: ezfycode@gmail.com.
0 Likes