So I created a mobile menu to facilitate navigation on my new site. I followed one of the tutorials on YouTube from the live sessions.
The issue I have is that when the menu is hidden, (so when the hamburger symbol is visible) the div blocks are still clickable but invisible. Which means that sometimes they can appear on top of another link and it takes the user to the wrong page of course.
Right now the links have an initial state with 0% opacity. This makes it possible to see through the elements, but they are still there and clickable.
You need to add a hide/show interaction to the menu links, just like you did for the menu icon. The default state will be set to hidden and upon click set them to flex. An then reverse that for the click to close.