My Solution For Bootstrap's Freaking Fixed Navigation Bar Hiding Things

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:

<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).

Comments

Comments powered by Disqus