Shopify themes, liquid, logos, and UX
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.
hello @thevista888
Please add the following code at the bottom of your assets/theme.css for the mobile.
.header-bar {
position: relative !important;
}
try this code
https://codepen.io/JGallardo/pen/lJoyk
@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?
yes modification header code as per demo that work custom changes
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024