Odnośnik do konkretnej części strony

Mam link odnoszący się do konkretnej części strony via parametr id. Powiedzmy, że link ma postać:

<a href="documentation.html#docs_variables">read documentation for more details</a>

...i odnosi się do:

<h1 id="docs_variables">Variables</h1>

Korzystam z bootstrap 3 i strona documentation.html zawiera komponent <nav class="navbar navbar-default navbar-fixed-top"></nav>. Tak więc, gdy po kliknięciu na w/w link ląduję na stronie docelowej, to obiekt z id, do którego się odnosiłem jest schowany pod navbarem.

Wiecie w jaki sposób mogę "wymusić" przesunięcie strony o powiedzmy 50px w dół, żeby komponent, do którego się przenoszę linkiem nie był schowany pod navbarem?

Ok, chwila niemocy umysłowej. Znalazłem rozwiązanie, tj.:

<h1 class="anchor" id="docs_variables">Variables</h1>

.anchor:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 5em;
    margin-top: -5em;
}