Sticky Header animation not working on Refresh Theme

[Viibed]

I am designing my website and noticed that my sticky header stopped working for no reason. When I first started designing it was working perfectly fine. The animation works in the editor but not on the actual website. Here is my website Viibed.

[BSSCommerce-HDL]

Hi @Viibed, Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.
When at the top of the page, your menu should be transparent, right?

[Viibed]

Sorry I worded my previous message wrong, I meant to say my sticky header animation where it only shows on scroll up doesn't work on the actual website but works on the editor.

[BSSCommerce-HDL]

Hi @Viibed, Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.

[Viibed]

In this one, the header is not shown because I have it selected as Only Show on Scroll, which is what I want.

In this screenshot, it IS visible even though I am scrolling down(no animation at ALL is shown) Which is what I'm trying to fix.

You can't get a screenshot of an animation, so I hope I explained everything well and cleared up confusion.

[BSSCommerce-HDL]

Hi @Viibed, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  body:has(.scrolled-past-header) .header-wrapper {
    visibility: visible;
    opacity: 1;
}

.header-wrapper {
    visibility: hidden;
    opacity: 0;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Viibed]

That makes my header transparent. I'm saying the "Only show on scroll" animation isn't working on the actual website. I still want the header to show.