Sticky header

Klubo555
Excursionist
47 0 20

Hi, I am using Debut theme and I want to have sticky header. I tried some code combinations from YouTube, but it doesn´t solve my idea.

My header looks like this at top:

Bez názvu2.png

What I want to reach is this:

2.png

Navigation bar will disappear at some point of scrolling down and that menu will replace it into top. When I tried some coding, navigation button disappeared, but menu stayed at same spot, so there was gap.

Thank you for helping me with this.

 

https://four-leggedpets.com/

leden2021

 

KetanKumar
Shopify Partner
13991 1634 5021

@Klubo555 

thanks for post 

are you able to code try this to let me know 

https://codepen.io/codeandfly/pen/xbQVOR

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
Klubo555
Excursionist
47 0 20

I think that I need your assist. I can't see navigation bar there and my orientation is worse. I understand to put CSS below theme.css, JS probably into en.default.json and that HTML? I guess theme.liquid. 

I don´t know how to explain it: That sticky header in that link presents my header on page? When I change for example colour, will it change colour to my header? Are you able to help me as staff? 

I can think of that with link you've sent, can I change colour of my header when "animation" will be "completed" (navigation bar disappear)? When that navigation bar disappear, colours of header will be reversed. White font instead of black font and icons too and #A02280 background instead off white? Is that possible to customize it (picture below)? Maybe the last time I need your help and what I need is just to put codes inside my codes and then I think I can customize it by myself by trying. Let me know sir, thank you very much!

 

Bez názvu-1.png

KetanKumar
Shopify Partner
13991 1634 5021

@Klubo555 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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