Tablet or Smart Device zoom web page with Fixed Top Menu Bar and Body - looks terrible

Question

Really stuck on this one:

I have a static page with a fixed menu bar on top at a higher z-index. The body of the page is a lower z-index under the menu bar.

When I view this page on a smart phone or tablet and I ZOOM with my fingers both the top menu bar and body zoom separately, making it very annoying to the client. Can I make the page zoom together (top menu bar and body) when someone zooms with their fingers on a smart tablet or device? Here is the page:

www.givemehope.com/test.htm

The body flows underneath the top menu bar correctly, but I need to make both elements zoom together on a smartphone or ipad?

Thank you for your help.

Erik

Answer 1

I'm was struggling with this basically having fixed menu doesn't work when zoom in. I thought that it would be possible to change the class of the menu when zoomed, so that when user zooms in the menu becomes static or absolute and when 100% becomes fixed. Luckily someone was able to help me out check out the fiddle below. Hope this helps.

Add class on page zoom. Remove when 100%

You can use this plugin to detect zoom https://github.com/yonran/detect-zoom then add this to you page.

var zoomLevel = document.getElementById('zoom-level');
window.onresize = function onresize() {

zoom = DetectZoom.zoom();

$('.navbar').text(zoom);

$(".navbar").removeClass("zoomed");

if(zoom > 1)
 $(".navbar").addClass("zoomed in");

if(zoom < 1)
$(".navbar").addClass("zoomed out");    

}
onresize();

http://jsfiddle.net/JsEPq/