Ok cool, Thanks! Yeah I was able to control scaling with this
<meta name = "viewport" content = "initial-scale = .25, minimum-scale = .25, maximum-scale= .25, width = device-width">
but now now that I look at it, it's really tiny and annoying not being able to scale.
My second idea was to use this meta tag to restrict scaling to a certain extent and then make the background of the menu div white so it then becomes a sort of fixed menu overlay. (See screenshot below) Does anyone have a better idea? Also, when I tested this on IOS devices the menu was floated toward the center/middle of the screen and was much more awkward and distracting. Any ideas/advice would be much appreciated! Thanks