Menu Overlay Blocking Page Interaction Despite Being Hidden

Hi everyone,

We’re using a hamburger menu icon that opens a full-page overlay (similar to what’s seen on many websites). It functions as expected, only appearing when the hamburger icon is clicked. However, we’re encountering an issue where we can’t change any content below the overlay in the studio unless we explicitly hide the menu layers. Even when the menu isn’t visible, it still blocks interaction with the rest of the page.

We are using custom JavaScript and CSS to show or hide the menu layer, and we’ve also implemented a “fade-in” and “fade-out” effect for the menu. While we can manually hide the menu each time, it’s not ideal as it risks forgetting to do so, which causes the menu to stop functioning properly on the live site.

What would be the best solution for this?

Any suggestions would be greatly appreciated!

Thanks!

Hi @lina_gamler, is there a difference between hiding the menu layers programmatically and hiding them via the studio Visibility setting? Please share the project ID and arena/component details or additionally some screen recording of the issue?