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?