Responsive menu: toggle adds inline styles

Responsive menu: toggle adds inline styles

I am trying to create a simple responsive hamburger menu type:

However, since toggle adds inline styles of "display:none" this creates an issue where each time I re-size to mobile view (less than 768px) and press on the hamburger twice (once to show the menu, once to hide it), then re-size viewport to desktop view (above 768px), the navigation remains hidden because of the inline styles.

The exact same issue is described here: however I don't want to use "!important" if possible and also not sure if it is a good idea to track viewport changes using $(window).resize(function(){} approach.

Any ideas, suggestions to solve this or just to improve the code would be highly appreciated.

Thank you!