Custom mobile nav acts as overlay and prevents clicking/interacting with elements beneath it despite being set to display none

Design help Animations & Interactions
1

I’ve created a custom mobile nav by creating two symbols. One for open, one for shut.

Open mobile nav is set to display none. Shut mobile nav is set to display: flex. When the hamburger menu is clicked, they invert (hiding the shut nav and displaying the open nav).

However, the elements within the open nav are perpetually active. Upon load they are not visible and are set to display none. Yet the link blocks are still clickable and the contents prevent any interaction with the elements on the page beneath it.

How do I hide the open mobile nav entirely so that it can only be interacted with when visible?

Here is my public share link: LINK
(how to access public share link)

2

css:
pointer-events: none;

(select the class name you want to don’t conflict with the click)

3

I ended up rebuilding it as one symbol and it’s working now.

4

Cool, sometimes its better to rebuild and if works leave like that :stuck_out_tongue: