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.

Leave comment

Your email address will not be published. Required fields are marked with *.