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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024