top nav bar blocking top content of the page

by

I have this Twitter Bootstrap code 

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active">
              <a href="https://stackoverflow.com/questions/10336194/some_url">My Home</a>
            </li>
            <li>
              <a href="https://stackoverflow.com/questions/10336194/some_url">Option 1 </a>
            </li>
            <li>
              <a href="https://stackoverflow.com/questions/10336194/some_url">Another option</a>
            </li>
            <li>
              <a href="https://stackoverflow.com/questions/10336194/some_url">Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

But when I am viewing the beginning of the page, the nav bar is blocking some of the content that is near the top of the page. Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn’t blocked by the nav bar?

20 Answers
20

Leave a Comment