title: Fragment in html content goes behind the navbar, how to prevent this?
body: <p>I am using bootstrap 3. I am trying to do fragment identifier in html. My problem is when I click on  a link(From Image: link1 or link2) the content goes up and placed behind the navbar. I want to show my content below the navbar. How can I do this? Please share with me if anyone have any idea about this. Bootply Link:<a href="http://www.bootply.com/FlMIBamLwj" rel="nofollow noreferrer">http://www.bootply.com/FlMIBamLwj</a></p>
  
  <p><strong>Before click on a link:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/RsaOU.jpg" alt="enter image description here"></p>
  
  <p><strong>After click on a link:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/bXp9K.jpg" alt="enter image description here"></p>
  
  <p>My Codes are here: </p>
  
  <pre><code>CSS:
  @media (min-width: 979px) {
  body {
      padding-top: 60px; 
       }
  }
  
      Html:
      &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
  &lt;form class="navbar-form navbar-left" role="search"&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" placeholder="Search"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/nav&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row clearfix"&gt;
            &lt;div class="col-md-4 column"&gt;
              &lt;div class="list-group"&gt;
                  &lt;a href="#l1" class="list-group-item list-group-item-success"&gt;List1&lt;/a&gt;
                  &lt;a href="#l2" class="list-group-item list-group-item-info"&gt;List2&lt;/a&gt;
                  &lt;a href="#l3" class="list-group-item list-group-item-warning"&gt;List3&lt;/a&gt;                    
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="col-md-8 column"&gt;
              &lt;div class="panel panel-default" id="l1"&gt;
                &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                    List 1 title
                  &lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="panel-body"&gt;
                  list1 content
                &lt;/div&gt;
                &lt;div class="panel-footer"&gt;
                  list1 footer
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="panel panel-default" id="l2"&gt;
                &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                    List 2
                  &lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="panel-body"&gt;
                  List 2 content
                &lt;/div&gt;
                &lt;div class="panel-footer"&gt;
                  List 2 footer
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="panel panel-default" id="l3"&gt;
                &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                    list3 title
                  &lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="panel-body"&gt;
                  list3 content
                &lt;/div&gt;
                &lt;div class="panel-footer"&gt;
                  list3 footer
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Bootply Link: <a href="http://www.bootply.com/FlMIBamLwj#" rel="nofollow noreferrer">http://www.bootply.com/FlMIBamLwj#</a></p>