How can I hide the header logo before scrolling in the Focal Theme?

Store Design
1

Hello, I hope someone can help me out with this problem.

I’ve built my site with the Focal Theme and I have an animation that shows the logo above the fold line. So I’d like the logo to be hidden at first, and only show when a user scrolls down and the sticky nav appears.

So my question is, what is the specific div-class for the header logo BEFORE scroll? I assume I can specify that logo instance and display: none?

Staging site is: https://b197k3jxftwgsix6-57555910835.shopifypreview.com/

Thanks so much!!!

Hannah

2

@hannahdossary

can you try this code

https://codepen.io/mischuk/pen/hoGLB

3

Hi @KetanKumar

Thanks for the code. I’m not sure how to add that. Is there a simple CSS code i can add into theme.css or do i need to add the Js into header.liquid?