title: decrease navbar height on scrolling down website
body: <p>I have a fixed navigation bar made with bootstrap 4. I want to decrease the height of the navbar when i scroll down the page. When i try to scroll down page. the height doesn't decrease. below is the video link of my browser</p>
  
  <p><a href="https://vimeo.com/user96844639/review/327524683/8446468055" rel="nofollow noreferrer">Link to the video i have tried</a></p>
  
  <p><a href="https://vimeo.com/user96844639/review/327524999/fb65c68dcd" rel="nofollow noreferrer">Want effect like this video</a></p>
  
  <p>Some code i have tried already</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.nav-button').click(function() {
      $('.nav-button').toggleClass('change');
    });
  
    $(window).scroll(function() {
      var position = $(this).scrollTop();
      if (position &gt;= 200) {
        $('.nav-menu').addClass('.custom-navbar');
      } else {
        $('.nav-menu').removeClass('.custom-navbar');
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: 'Montserrat', sans-serif;
  }
  
  
  /* Header */
  
  header {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)), url(images/header-img.jpeg) no-repeat center center/cover;
  }
  
  
  /* Navbar */
  
  .nav-menu {
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5));
    padding: 30px;
    transition: all .7s;
  }
  
  .menu-item {
    font-size: 13px;
    letter-spacing: 1px;
    color: #eee;
    transition: color .5s;
  }
  
  .menu-item:hover {
    color: #70aed2;
  }
  
  .line1,
  .line2,
  .line3 {
    width: 23px;
    height: 3px;
    margin: 5px;
    transition: all .4s;
  }
  
  .change .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .change .line2 {
    opacity: 0;
  }
  
  .change .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  
  .custom-navbar {
    padding: 5px 30px;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .7));
  }
  
  
  /* End of Navbar */
  
  
  /* Banner */
  
  .banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }
  
  .banner-heading {
    animation: anim 2s;
  }
  
  .banner-para {
    animation: anim 2s .5s backwards;
  }
  
  @keyframes anim {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  
  /* End of Banner */
  
  
  /* End of Header */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Header --&gt;
  &lt;header&gt;
    &lt;!-- Navbar --&gt;
    &lt;nav class="navbar navbar-expand-lg fixed-top nav-menu"&gt;
      &lt;a href="#" class="navbar-brand text-light text-uppercase"&gt;&lt;span class="h2 font-weight-bold"&gt;photo&lt;/span&gt;&lt;span class="h1"&gt;X&lt;/span&gt;&lt;/a&gt;
      &lt;button class="navbar-toggler nav-button" type="button" data-toggle="collapse" data-target="#myNavbar"&gt;
              &lt;div class="bg-light line1"&gt;&lt;/div&gt;
              &lt;div class="bg-light line2"&gt;&lt;/div&gt;
              &lt;div class="bg-light line3"&gt;&lt;/div&gt;
            &lt;/button&gt;
      &lt;div class="collapse navbar-collapse justify-content-end text-uppercase font-weight-bold" id="myNavbar"&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Mission&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Collection&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Gallery&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Customers&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Pricing&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="#" class="nav-link m-2 menu-item"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- End of Navbar --&gt;
  
    &lt;!-- Banner --&gt;
    &lt;div class="text-light text-md-right text-center banner"&gt;
      &lt;h1 class="display-4 banner-heading"&gt;Welcome to &lt;span class="text-uppercase"&gt;photo&lt;/span&gt; &lt;span class="display-3"&gt;X&lt;/span&gt;&lt;/h1&gt;
      &lt;p class="lead banner-para"&gt;Lorem ipsum dolor sit amet consectetur adipisicing.&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- End of Banner --&gt;
  &lt;/header&gt;
  &lt;!-- End of Header --&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;</code></pre>
  </div>
  </div>
  </p>