So I have been using this megamenu template from https://github.com/marioloncarek/megamenu-js
I also uploaded a working version here:
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.
I would like it to:
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?);
Sorry for my incoherence, it is 5:39 am, so instead I have attached a more expressive .gif.
Any help would be greatly appreciated.
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.