Header on all pages not sticking properly

The header menu on our website is working correctly on the homepage but not behaving correctly on all the other pages. I want it to be sticky on all the pages just like the homepage. Here is how it is showing. How do I fix the header to be sticky at the top on all pages all the way when you scroll down? Thanks!

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”,

Hello, @An_A !

To fix it, go to your Shopify admin dashboard and click on “Online Store” then “Themes”. Find your current theme and click on “Actions” then “Edit Code”. Find theme.liquid and add this code above tag:


Let me know if this helps!

Hello,

Thanks for your response! Unfortunately though it did not work. I entered it as per your instructions:

After I added the code, the website was showing this and it did not fix the header menu on the other pages:

Any other suggestions? Thank you very much.

Hi, sorry for my mistake in my previous respone. Try adding the code at the bottom of any of these files base.css or header.css:

.site-header--sticky.active {
    position: sticky !important;
  }

Hello,

Could you let me know where exactly to add here. I can’t find header.css or base.css. Thank you.

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 :

.site-header--sticky.active {
    position: sticky !important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly