title: Responsive menu has dropdown bug when cycling through media queries
body: <p>So I have been using this megamenu template from <a href="https://github.com/marioloncarek/megamenu-js" rel="nofollow noreferrer">https://github.com/marioloncarek/megamenu-js</a></p>
  
  <p>I also uploaded a working version here:
  <a href="http://mateitudor.com/megamenu/" rel="nofollow noreferrer">http://mateitudor.com/megamenu/</a></p>
  
  <p>It's untouched from the original version by the author.
  Everything is perfect except when I resize the window to a mobile size and activate two dropdowns, it creates havoc for the desktop version.</p>
  
  <p>I would like it to:</p>
  
  <p><strong>1. in the case one dropdown is clicked on mobile, to be present on desktop;
   2. in the case two dropdowns are clicked on mobile, to revert them to the hidden state on desktop (— would this be a good design pattern?);</strong></p>
  
  <p>Sorry for my incoherence, it is 5:39 am, so instead I have attached a more expressive .gif.</p>
  
  <p>Any help would be greatly appreciated.
  Thank you.</p>
  
  <p>Later edit, what I've tried, unsuccessfully:
  To see if the browser is bigger than the mobile mediaquery and if there are menus open, hide() them. But I did something wrong and it failed miserably.</p>
  
  <p><a href="https://i.stack.imgur.com/Dyb9K.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dyb9K.gif" alt="the bug"></a></p>