Bootstrap navbar covers content on zoom

Question

I am building a website with a navbar-fixed-top class for the navbar.It works fine on everything except when I zoom in. When I zoom in on a mobile device; the navbar starts wrapping and goes to next line after collapsing.

However, I do not want the navbar to be affected when zooming in but at the same time keeping the responsiveness for different devices.

Is this possible or is there a work around ?

<nav class="navbar navbar-default navbar-static-top lato-reg" id="navMenu">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="index.html"><img src=""></a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="hidden">
        <a href="#page-top"></a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Work</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Writings</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">About</a>
      </li>

    </ul>
  </div>
</div>
<!-- /.container-fluid -->

Answer 1

This is the way touch devices handle position:fixed: it stays fixed and covers up the rest of the content.

One easy fix is to use the viewport meta tag and disable user scaling:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

Some top selling admin themes built with Bootstrap do this. It makes your page behave like an app. However, it screws up users' normal behavior on touch and most developers don't want to screw up accessibility, including Bootstrap's own site "GetBootstrap.com".'

The other is to not use position fixed but use the static position on the navbar. GetBootstrap.com doesn't use a fixed position navbar, it doesn't follow you down the page. On their documentation pages, the affix is working on the sidebar. When you zoom on a touch device the page messes up the layout. This is normal behavior on a touch device. Most of the time, and I've looked into this extensively, the developer has decided to allow accessibility trump layout with respect to zooming on touch, that is: they leave it alone even though it looks bad and covers up content. This is what I'm doing these days.

The other solutions in the @Sebsemilla comment are worth exploring but the one involving media queries is pretty useless. Media queries detect width, height, orientation and pixel density but they do not detect whether or not a person is using a touch device.

Generally, depending on the situation, I detect touch or no-touch with javascript and serve up position:fixed for non-touch devices and position:absolute, or position:static, or position:relative on touch devices. Some people, very few, say something about this but until the fixed position works as you would expect, I think of position:fixed as a progressive enhancement for non-touch devices

Another idea is to fake position fixed with jQuery:

What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

Use it with http://benalman.com/projects/jquery-throttle-debounce-plugin/

Here's a demo I set up: https://jsbin.com/nugibi/2/edit?html,css,js,output

You can combine this with detecting touch and use it only on touch devices.