I haven’t said anything before but… I second that a thousand times. Dropdown menus on mobile is not a good concept or experience. Navigation on mobile should not be hidden, at all. Rather it should expand to a whole screen and be easy, evident, natural, app-like. Good decision. I often do a bottom bar with icons (go to 1001pneus.com and reduce the screen size to get to the mobile view). I call that the “Facebook approach” because it’s one of the big apps that went from a hidden side menu to a much more evident app-like bottom menu. Remember that everything you put on top of the screen will require 65% of the mobile users to use their second hand to tap, or to extend their thumb like they don’t want to. Honestly, I still don’t understand why in August 2015 so many apps and sites put navigation things on top of the screen or on the higher half of the screen, considering how big the smartphones are.
Anything in the orange zone already makes me yell at the design team:
I have 2 apps in dev, the two of them have a “lefty” mode that you can turn on in the settings and mirrors the UI. It’s not actually a matter of being a lefty or not, it’s just about how you use your device. I made my own study and often people don’t use the same hand considering the time of the day. Right hand in the metro, left hand in bed, on the street etc…
Height of the device = height of the browser viewport. So two solutions: body element to height:100% AND height of the menu to 100% too, or height of the menu to 100VH (type the “VH” unit by hand and good guy Webflow will take it.)
The initial scale meta you’re referring to only sets a “no-zoom” and not a lot more.
I’m not commenting on your JS because I’m a fraud in JS.
Who wonders? Did you give any link? ;-D