Minimal theme: Hide sticky header when scroll down

thevista888
Explorer
63 0 21

Hello, in minimal theme there's no sticky header in default settings.
I added it by using those codes;

.header-bar {
    position: fixed;
    z-index: 999;
    width: 100%;
}
header.site-header {
    padding-top: 100px;
}

 

It works just fine but also I'd like to hide it when scroll down. I tried many codes that are on this forum and also on the web, nothing changed.
My store link: https://wiggleduck.com/ 
Thank you.

Natztech
Shopify Partner
2118 541 1295

hello @thevista888 

Please add the following code at the bottom of your assets/theme.css for the mobile.

 

.header-bar {
   position: relative !important;
}

 

 

 

KetanKumar
Shopify Partner
23196 2339 8589

@thevista888 

try this code

https://codepen.io/JGallardo/pen/lJoyk 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thevista888
Explorer
63 0 21

Hello @Natztech 

It didn't work, it cancelled the sticky header

0 Likes
thevista888
Explorer
63 0 21

@KetanKumar 

I'm not sure if this is what I'm looking for, in the example of the code, the header is always visible on the top. I should make it visible when scrolling up and invisible when scrolling down.
I found this one on the web, that's a perfect example of what I'm looking for, but I need little guidance to apply it. I tried to add the "JS" codes to the theme.js file.
It did not work. I guess I should edit html&css too, I'm not sure, how can i apply it?

KetanKumar
Shopify Partner
23196 2339 8589

@thevista888 

yes modification header code as per demo that work custom changes 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing