How to consider body margin on html anchor

Question

I have this page with a fixed nabber on top (using default bootstrap navbar).

The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.

What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.

Does anyone have an idea of how to fix it?

Answer 1

With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.

Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.

further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)

Answer 2

You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:

<a href="#link">Link</a>

<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>

JSFiddle Demo

Or, give the content div a padding-top, or margin-top of the height of the nav bar:

<a href="#link">Link</a>
<div id="link" class="content">
    Content Here...
</div>

CSS:

.content{
    padding-top:50px;
}

JSFiddle Demo