All Articles

Shrinking Navigation Bar When Scrolling Down - Bootstrap 3 Navigation & jQuery

In this tutorial, I will show you how to create an animated fixed navigation that will resize on scroll and when you scroll down the page a bit, the header resizes smaller, and gets back bigger when you scroll back to the top with just simple CSS3 animation and jQuery.

  • Github
  • Demo
  • Codepen, please view in full screen.

Sticky Navigation

To make a sticky nav you need to add the class navbar-fixed-top to your nav

Official documentation: Bootstrap navbar fixed top

Let’s now take a look at our HTML markup. The markup consists of a header with a logo and navigation, some sections with color difference only.

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button
        type="button"
        class="navbar-toggle"
        data-toggle="collapse"
        data-target="#top-nav"
      >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="http://trungk18.github.io/"
        ><img src="trungk18.png" class="img-responsive" title="trungk18"
      /></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="top-nav">
      <ul class="nav navbar-nav navbar-right">
        <li class="page-scroll">
          <a href="#portfolio">Portfolio</a>
        </li>
        <li class="page-scroll">
          <a href="#about">About</a>
        </li>
        <li class="page-scroll">
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<!-- Content Section -->
<div class="content">
  <section id="portfolio"></section>
  <section id="about"></section>
  <section id="contact"></section>
</div>

I am using navbar-default from bootstrap with navbar-fixed-top to make it stick to the top of webpage. The HTML is fairly straightforward.

Now take a look at CSS

Class .navbar-default was set the padding top and down for 30px each, and the transition is based on padding. When the navbar gets resized on scroll, I shrink the value to 10px by adding child class navbar-shrink. Finally, I added some example media queries so that our animated resizing navigation will work only in medium devices desktops Bootstrap standard grid.

@media screen and (min-width: 992px) {
  .navbar-default {
    padding: 30px 0;
    transition: padding 0.3s;
  }

  .navbar-default.navbar-shrink {
    padding: 10px 0;
  }
}

.navbar-default a {
  color: #4d4d4d;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 42px;
  font-weight: 700;
  font-size: 20px;
}

.navbar-default a.brand > img {
  max-width: 70px;
}

.navbar-default a.active {
  color: #2dbccb;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content > section {
  width: 100%;
  height: 100%;
}

#portfolio {
  background: #2dbccb;
}

#about {
  background-color: #eb7e7f;
}

#contact {
  background-color: #415c71;
}

jQuery code

To make it happen, I am going to use jQuery to add and remove the class navbar-shrink when we scroll a certain amount (in this situation is 50px). Adding and removing this class will animate the navbar.

$(document).ready(function() {
  $(window).scroll(function() {
    //Method 1: Using addClass and removeClass
    //if ($(document).scrollTop() > 50) {
    //    $('.navbar-default').addClass('navbar-shrink');
    //} else {
    //    $('.navbar-default').removeClass('navbar-shrink');
    //}

    //Method 2: Using toggleClass
    $('.navbar-default').toggleClass('navbar-shrink', $(this).scrollTop() > 50)
  })
})

We can use toggleClass with 2 parameter.

  • The first parameter will be the target element.
  • The second parameter for determining whether the class should be added or removed. If this parameter’s value is true, then the class is added; if false, the class is removed.

Conclusion

Nowadays it is not really hard to search for component we need to use in our front-end project, but the most important thing is you can understand how it’s worked and you can easily implement this animated resizing header into your next project.

Thanks for checking it out and view the demo, feel free to fork and fix the source code then pull back to me.

Published 26 Nov 2017

Recent Posts

ES6 in my daily life

ES2015/ES6 has been around for more than two years with all the exciting feature and syntax. After working with TypeScript and Angular 2 in a project for more than a year, there are the features that I often apply in my code.

JavaScript naming convention

There are only two hard things in Computer Science: cache invalidation and naming things


Follow @tuantrungvo on Twitter for more!