Bootstrap 3 Sticky Header Resize On Scroll

I have a single website project I’m working on using Bootstrap 3 and it has a sticky header which I like to use for page navigation. It has a logo that’s 90px tall and padding on the <li> tags to compensate for the overall height of the nav bar. I wanted to have the logo, padding and nav bar height change on scroll so that I could still have the branding and navigation but use less space overall when reading the page content. I put together the following solution.

Example

HTML – This is the Bootstrap 3 nav example stripped down to show a logo  and 3 links. It is also using a standard container instead of expanded.

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a href="#main"><img class="logo" src="img/logo.png"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#section1">Link</a></li>
          <li><a href="#section2">Link2</a></li>
          <li><a href="#section3">Link3</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
  </nav>

CSS – The nav height and logo are set to 90px and the transitions vary and can be changed based on preference.

/*---- Nav ----*/

.logo {
  height: 90px;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.logo.shrink {
  height: 50px;
}
.navbar-default {
    background-color: #fff;
    border-color: #fff;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 35px 12px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.nav>li>a.shrink {

    padding: 15px 12px;
}

nav.navbar{
   height: 90px;
   -webkit-transition: all 0.1s ease;
   transition: all 0.1s ease;
   overflow: hidden;
}

nav.navbar.shrink {
  height: 30px;
}

JS – Add this to your footer or better yet create a file called nav-shrink.js and link it in your footer.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav, .logo, .nav>li>a').addClass('shrink');
  } else {
    $('nav, .logo, .nav>li>a').removeClass('shrink');
  }
});

Conclusion

Just keep in mind that this requires the use of bootstrap 3. If you have any questions about implementation, feel free to ask.