Fixed nav-bar hides content in Bootstrap

Question

I have fixed navbar that hides content when using tabs. The navbar display properly when I'm not navigating between tabs, when I click one the tabs the navabr hides content including headers of the tabs.

After clicking one of the tabs, the content gets hidden.

I tried using this, but only works when not navigating between tabs.

body{
margin-top: 80px;
}

Guys here's my example on jsfiddle and I think the cause of this might be my javascript, when I'm not using hash it's working fine. I need the hash when the user refresh the page, the last open tab needs to be active.

 $('#sign-up-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#sign-up-tabs a[href="' + hash + '"]').tab('show');

Solved: I have solved it by changing my code to the following.

$('#sign-up-tabs').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
   window.location.hash = $(this).attr('href');
  $(this).tab('show');
 });
// on load of the page: switch to the currently selected tab
  var hash = window.location.hash;
 $('#sign-up-tabs a[href="' + hash + '"]').tab('show');

on jsfiddle

Answer 1

You must change your navbars container to use display: block .

If it is not yet inside a container, you should put it inside a div, and it will probably work like a charm.

For example, if you're using:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <!-- the rest of your code -->
  </div>
</nav>

You should change it to something like:

<div style="height: 80px">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <!-- the rest of your code -->
    </div>
  </nav>
</div>

Answer 2

Give the top padding to the container according to the navbar height. Example if your navbar height is 90px then you have to give top padding 90px to the container.

.container {
    padding-top:170px;
}