Bootstrap navbar header overlaps content on small screens

Question

I have created a bootstrap navbar and on small screens it overlaps the pages content. Is there a way to push the content down when the navbar would overlap it? Preferably it could be done in HTML or CSS.

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container-fluid">
<div class="navbar-header">
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
    <a href="./" class="navbar-brand"><img id="topLogo" src="http://placehold.it/50x25" alt="LOGO HERE" class="img-responsive"></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
  <ul class="nav navbar-nav">
    <li>
      <a href="#">Getting started</a>
    </li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    <li>
      <a href="#">Components</a>
    </li>
    <li>
      <a href="#">JavaScript</a>
    </li>
    <li>
      <a href="#">Customize</a>
    </li>
  </ul>
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</nav>
</div>
</header>
<div class="container-fluid">
<h1>Text 1</h1>
<h2>Text 2</h2>
<h3>Text 3</h3>
<h4>Text 4</h4>
<h5>Text 5</h5>
<h6>Text 6</h6>
</div>

I've tried changing the navbar-fixed-top to both static and non fixed, however changing to makes the navbar not start at the top of the page

http://jsfiddle.net/7v9tcc2m/3/

Answer 1

When you use the class navbar-fixed-top the navbar will overlap the content. Remove this and then it'll work as expected

Following from your comment. The reason why you have space between the top and the nav is because you've got padding on the body.. remove this then it will work.

Demo here