This is a we­ll kno­wn pro­blem wi­th boots­tra­p:

If you use a fixed na­vi­ga­tion bar at the to­p, whe­ne­ver you fo­llow a li­nk to so­mewhe­re in­si­de the pa­ge, the ac­tual li­nk tar­get is going to be hi­dden be­low that freaking na­vi­ga­tion ba­r.

The­re are a ton of so­lu­tion­s, whi­ch ha­ve two tons of mi­nor is­sues. The­re see­ms to be no way to sol­ve this using CSS and JS wi­thout cau­sing other pro­ble­ms.

The­re are a bun­ch of JS so­lu­tions aroun­d. He­re's mi­ne:

<script type="text/javascript">
 $(window).on('hashchange', function(){
     if (location.hash) {
         $('body').animate({scrollTop: $(location.hash).offset().top - $('#navbar').outerHeight(true)*1.2 }, 1);
     }
 });
 $(document).ready(function(){$(window).trigger('hashchange')});
 </script>

It wo­rks we­ll, is short and has de­cent bro­w­ser co­ve­ra­ge. It on­ly fails in the cor­ner ca­se of cli­cking on the sa­me in­ter­nal li­nk twi­ce (whi­ch, who ca­res).