title: When navigating to #id, element is hidden under fixed position header
body: <p>I have a Bootstrap 3.0 navbar with that is always visible at the top of the page, but this could represent anything for which the <code>position</code> property is <code>fixed</code>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default navbar-fixed-top" &gt;
  </code></pre>
  
  <p>Because fixing it takes it out of the document flow, I need to add some padding to the body element so the content isn't hidden when the page is first display</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      padding-top: 70px;
  }
  </code></pre>
  
  <p>The problem is that when I click a menu item to navigate to a section, like <code>#About</code> then the top of the section is cut off.</p>
  
  <h1><a href="http://jsfiddle.net/KyleMit/gDLJm/2/" rel="noreferrer">jsFiddle</a></h1>
  
  <p><em>Q:</em> Is there a way to adding padding so that the full item will come into view when navigated to?</p>