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:  https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle-display-none/ 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!