How to make header sticky throughout homepage

Store Design
1

Hello,

The header menu on our website is not sticky through to the end of the homepage when scrolling down. It disappears somewhere on the slideshow section. How can I resolve this so that it’s sticky all the way when scrolling down?

Our website is: www.hansandgreta.com. Here is the theme info:

“name”: “theme_info”,
“theme_name”: “Hans & Greta”,
“theme_author”: “Shopifytemplate”,
“theme_version”: “2.0”,

Thanks so much!

2

Hello,

Please Try this Css I think Your Issue Will Resolve

header.site-header.active {
    position: fixed;
    transition: all 1s;
}
header.site-header {
    transition: all 1s;
}
3

Hi @An_A ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

4

Hello,

Thank you! I tried this method and it worked on the homepage but all the other pages have an issue now where the menu bar is showing like this as you scroll down. How can I fix this to be sticky on all the pages on the website? Thank you.

D1B5CB87-1FBC-4AB9-9FDF-6C361C1C065A.png
D1B5CB87-1FBC-4AB9-9FDF-6C361C1C065A.png1170×2532 343 KB

5

Sorry for the late reply. After going through your site, it looks like your header is sticky all over the pages. Let me know if you need any more help.

Best regards,

Victor | PageFly