title: Fixed position navbar obscures anchors
body: <p>I am building a site using Twitter Bootstrap and have a 40px fixed position nav bar at the top of the page. I've set some anchors to jump to the various H1's throughout the page, but the anchor targets end up partially obscured by the nav bar. Is there a way to offset the links to account for the navbar? I've seen one suggestion to put each anchor inside its own offset div, but this seems like a lot of duplicative code and I'm wondering if there is another way.  </p>
  
  <p>If possible, I'd prefer to do this just with CSS rather than jQuery, but any solution would be welcome. </p>
  
  <pre><code>.topbar {
     height: 40px;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 10000;
     overflow: visible;
  }
  
  body {
    padding-top: 40px; 
       /* 40px to make the container go all the way to the bottom of the topbar */
       font-family: 'Proxima', "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: 14px;
       line-height: 18px;
        font-weight: normal;
        color: #555;
        background-color: #eee;
   }
  </code></pre>
  
  <p>Thanks! </p>