title: Bootstrap navbar covers content on zoom
body: <p>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.</p>
  
  <p>However, I do not want the navbar to be affected when zooming in but at the same time keeping the responsiveness for different devices.</p>
  
  <p>Is this possible or is there a work around ?</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top lato-reg" id="navMenu"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header page-scroll"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="index.html"&gt;&lt;img src=""&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="hidden"&gt;
          &lt;a href="#page-top"&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page-scroll"&gt;
          &lt;a href="index.html"&gt;Work&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page-scroll"&gt;
          &lt;a href="index.html"&gt;Writings&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page-scroll"&gt;
          &lt;a href="index.html"&gt;About&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.container-fluid --&gt;
  </code></pre>
  
  <p></p>