I’m currently building an interaction into a site so that when a user clicks on a button a fullscreen overlay appears showing a selection of projects.
I have it working pretty much how I want. However, at the moment if a user opens the overlay (by clicking the ‘view projects’ button in the top left corner) and then closes it using the ‘X’ button that appears, if they then went to click the ‘view projects’ button again on that page the overlay doesn’t appear. The page acts as if the overlay is open (the mouse can still click elements from within the overlay for example) but it doesn’t appear visually.
I suspect some interaction command is causing the issue but I don’t know how to solve it. At the moment when the ‘view projects’ button is clicked the overlay div is set to display as flex and then its size becomes 100 vw/vh. When the ‘X’ button is pressed the div is set to size down to 0 vw/vh and then display as none.
Any help much appreciated!
Here is a link to one of the pages it appears on:
And a read only link to the site: