Quite a few things I’ve noticed in your animation. You currently have a “Menu Div” visible at all times, and what you’re basically doing, is making the content inside the “Menu Div” appear on click.
What you should be doing, is also affecting the actual “Menu Div” itself and not “MenuItems”. Therefore, when the menu opens, the Menu Div should become visible, whereas when the menu closes, it should go back to hidden so it doesn’t get in the way.
I think what you’re also missing in your animation is an “initial state”. When you create an animation for the menu opening, the “Menu Div” element should have an initial state of hidden, and then change to block/flex. It should also have a higher z-index so it stays above your “Text animation div”. So here’s what happens:
- When the site loads, the “Menu div” has a display of none due to the initial state that you set.
- When you click on the logo that opens the menu, the “Menu div” appears on top of the “Text animation div”. During this time, items inside the menu div will be clickable, and those inside the text animation div won’t.
- When you close the menu, the menu div should once again have a display of none, which will send it back to its initial state.
This is the cycle that should be taking place. Hope it all make sense! You should try it out and let me know if it worked out for you. If not, I’d be glad to hear what went wrong and see if I can be of more help.