Streaming live at 10am (PST)

Problem with mobile nav button function combined with interactions

My site (https://pkp-full-site-1.webflow.io/) uses an interaction on the mobile nav (hamburger) button in addition to the default function to show/hide the mobile menu. My focus is resolving a problem with mobile landscape and portrait modes. Tablet and desktop are fine as is.

The interaction is set up to do two things:
1 - for some reason there’s a transparent block at the top of the mobile nav menu block which displays part of the hero image and looks like a cutout in the menu. I want to have the entire red menu fill up the screen, so I created a separate div to show/hide when the menu button is tapped. That div covers up the transparent section.
2 - animate the menu so that if forms an ‘X’ with the hamburger line elements.

When I test this interaction, it works great on a desktop browser that is shrunk down to mimic a mobile size. But on my phone, the interaction is off so that the transparent section is still showing, and then when I tap the menu button, the hidden block displays, and then the burger menu animates. So it’s one step off. I hope this makes sense.

Ultimately, if I could resolve the transparent area without showing a separate element, that might help, as I feel like I’ve got too much going on in that top section.

Any suggestions for how to fix?


Link:
https://preview.webflow.com/preview/pkp-full-site-1?utm_medium=preview_link&utm_source=designer&utm_content=pkp-full-site-1&preview=dc731d67a824e8c9408a3e5c2e3ec003&mode=preview

Hello!

Thanks for reaching out.

The site is looking great, and it looks like with some quick tweaks then things can begin to function as expected.

Regarding the transparency, do you experience the same issue if you add a z-index of 1 to the “Navbar” element? You might need to adjust the z-index of the red bar as well to make sure the layering is correct.

As far as the interaction not lining up in its order, this could be how the interaction is happening alongside of the built-in animation with the Navbar element. I’m wondering if creating a more custom nav dropdown would be a workaround for this.

Hopefully this helps a bit, and feel free to add any more questions; I’d love to be able to address any further potential solutions!