I have a floating header with height of 70px. When the page width shrinks below 860px, a responsive “hamburger” menu icon appears. When that icon is clicked, a responsive menu appears below the header (it’s a Group element) and fills the rest of the window. I am basically trying to replicate the responsive menu found here: https://www.chromeindustries.com/ (without the fancy scroll transition)
I have tried to replicate (and simplify) the issue here: https://responsive-menu-test.bubbleapps.io/version-test
As the example shows, the hero button is not clickable. But If I make the responsive menu (the yellow group that appears after clicking hamburger icon) much shorter, the hero button becomes clickable.
How can I have a hidden responsive menu that covers the full width and height of the window when the hamburger icon is clicked and still have a clickable hero button?
I believe this post describes the same problem: Incredibly simple button not registering clicks (and yes it is clickable)