top nav bar blocking top content of the page

Question

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='some_url'>My Home</a>             </li>             <li>               <a href='some_url'>Option 1 </a>             </li>             <li>               <a href='some_url'>Another option</a>             </li>             <li>               <a href='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?

Answer 1

Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:

body {   padding-top: 60px; } @media (max-width: 979px) {   body {     padding-top: 0px;   } }