How to minimize and pin the navigation menu when scrolling

Let’s look at how to change the size of a navigation bar when scrolling—using CSS and JavaScript—and fix it to the top of the screen.

What we’ll be doing

You can see the final result in this CodePen:

Step 1. Add HTML

Let’s create a navigation bar.

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Step 2. Adding CSS

We’ll add some styles to our navigation bar so that everything looks like it would in a real-world project.

/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
}
/* Style the navbar links */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Style the logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}
/* Links on mouse-over */
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Style the active/current link */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}
/* Display some links to the right */
#navbar-right {
  float: right;
}
/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}

Step 3. Adding JavaScript

When the user scrolls down the page by 80 pixels (80px) from the top of the document, we change the height of the navigation bar and the font size of the logo.

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

That’s it. A great technique using vanilla JS for building excellent websites.