Fixed position navbar obscures anchors

HtmlCssAnchor

Html Problem Overview


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.

If possible, I'd prefer to do this just with CSS rather than jQuery, but any solution would be welcome.

.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;
 }

Thanks!

Html Solutions


Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBenView Question on Stackoverflow