I’m not exactly sure if it will answer your question but here is the things I noticed.
When designing interactions (show menu and hide menu) you are declaring to initial state.
Initial state is what style should be applied on the live website before anything happen. It can be confusing but it’s actually handy for getting elements out of the way in the designer but be sure that they will be displayed correctly when published.
Your interaction for your menu button should then be
Show menu = initial state menu display hidden and then menu display flex
Hide menu = menu display flex (no initial state as the element already got one in the show menu interaction)
For the symbol you could make a symbol of your left gutter and right gutter it should work as long as you have all the element needed for interactions on every page.
As you menu would probably a constant over your site I would go with a Navigation Wrapper that include the left gutter, the right gutter and the mega menu all together and make this a symbol.
Because these three are fixed position the wrapper will by default be 0px height but will contain everything about your navigation.
I hope it helps.