---
author: ''
category: ''
date: 2013/08/20 21:29:11
description: ''
link: ''
priority: ''
slug: my-solution-for-bootstraps-freaking-fixed-navigation-bar-hiding-things
tags: ''
title: My Solution For Bootstrap's Freaking Fixed Navigation Bar Hiding Things
type: text
updated: 2013/08/20 21:29:11
url_type: ''
---
This is a well known problem with bootstrap:

If you use a fixed navigation bar at the top, whenever you follow a link to somewhere 
inside the page, the actual link target is going to be hidden below that freaking
navigation bar.

There are a ton of solutions, which have two tons of minor issues. There seems to
be no way to solve this using CSS and JS without causing other problems.

There are a bunch of JS solutions around. Here's mine:

.. code:: html

   <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 works well, is short and has decent browser coverage. It only fails in the corner case of clicking on the same
internal link twice (which, who cares).