Minimal theme: Hide sticky header when scroll down

thevista888
Explorer
65 0 22

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.

Replies 5 (5)

Kinjaldavra
Shopify Partner
2302 570 1422

hello @thevista888 

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

 

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

 

 

 

thevista888
Explorer
65 0 22

Hello @Kinjaldavra 

It didn't work, it cancelled the sticky header

KetanKumar
Shopify Partner
36839 3635 11972

@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
65 0 22

@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
36839 3635 11972

@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