I’m trying to create a hamburger menu that, when clicked, opens a full-screen menu. Currently I seem to have the effect I’m looking for; however, when I load the page the menu is already open. I have to click twice to close the menu. After that, it works as it should but obviously, it’s not usable as is.

The strangest part is it was working until I tried to change the background colour of the menu box (the light grey).

Anyone have any suggestions as to why this is happening and what I can do about it?

Looks like you can just ditch your initial state interactions on the Mouse Click Trigger of menu icon for both ‘open-menu’ and ‘close-menu’. I’m guessing there’s a conflict with the initial states in your interactions and css styling of elements.