One issue I am facing is with the menu on my website that creates a backdrop covering the entire site. While the menu can be closed by clicking anywhere outside of it, this functionality works well.
The problem arises when users access the site on mobile devices because the backdrop only disappears when tapped, not swiped. This has caused confusion among some users who are unsure how to make the site responsive again.
A couple of solutions have crossed my mind, but none seem ideal:
- Disabling the backdrop and adding a "Close menu" button to the menu could work as a last resort.
- Adding a class to the backdrop to "grey out" the site when the menu is open does not fit well with our current design.
In my opinion, the most effective solution would be to close the menu on swipe or scroll events as well. Is there a way to bind these events to the backdrop?