Mobile Menu Hamburger Disappearing

Hello! I was wondering if someone would be able to guide me a bit in the right direction on how to animate my mobile menu in the most efficient way. On my home screen for tablet and below, I am wanting to have a transparent nav bar that becomes opaque as the page is scrolled down. I think I got the basic gist right using two nav bars and showing/hiding each of them, but now my hamburger menu buttons disappear whenever they are clicked and I cannot figure out why. (Perhaps two nav bars isn’t the most efficient way of designing this effect – I am open to any feedback!)

Am I missing a super basic z-index or something inside my interactions where the menu button is hiding itself? Thanks a million!

See any of my other pages other than the home page for an example of when the menu sort of works.


Here is my public share link: https://preview.webflow.com/preview/margaret-petersen?utm_medium=preview_link&utm_source=designer&utm_content=margaret-petersen&preview=60a392a3e1a81c564d239c2eae1e662c&workflow=preview
(how to access public share link)

hi @ksammm using two navbars isn’t the best way to achieve this effect. Here is a link to video tutorial that may give you an idea to create navbar the way you need but there is more resources out there.