I’ve encountered a significant issue with the “pop” animation setting on a menu button I created. Specifically, there’s a non-clickable dead zone directly above the button when this animation is applied. This issue is particularly problematic on mobile devices where the button’s placement is close to other elements on the page.
The problem manifests when trying to click on elements on my website that are positioned above the (closed) menu button. These elements are unresponsive unless you scroll the page enough past the point at which the accordion menu expands. In contrast, when I use the other animation styles, this dead zone issue doesn’t occur.
Unfortunately, I can’t switch to the other animations because they look inelegant with my current setup. I’m using text-only labels for my sub-buttons, and the alternative animations tend to compress the sub-buttons and their text together when the menu is not expanded, which negatively affects the user experience.
I’m seeking a solution that allows me to continue using the “pop” animation without creating this dead zone issue, especially on mobile devices. Any guidance or suggestions to resolve this problem would be greatly appreciated.
