title: Nav bar not collapsing on the right place
body: <p>I have a nav bar collapse javascript method, the collapses if this condition is met:</p>
  
  <pre><code>  // Collapse Navbar
   var navbarCollapse = function() {
   if ($("#mainNav").offset().top &gt; 100) {
    $("#mainNav").addClass("navbar-shrink");
   } else {
    $("#mainNav").removeClass("navbar-shrink");
   }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);
  </code></pre>
  
  <p>Here is my HTML code for my navbar:</p>
  
  <pre><code>&lt;body id="page-top"&gt;
  
  &lt;!-- Navigation --&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"&gt;
    &lt;div class="container"&gt;
      &lt;a class="navbar-brand js-scroll-trigger" href="#page-top"&gt;Kristoffer Tølbøll&lt;/a&gt;
      &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
        Menu
        &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link js-scroll-trigger" href="#download"&gt;My Work&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link js-scroll-trigger" href="#features"&gt;My Skills&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link js-scroll-trigger" href="#contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have another page, where I want the nav-bar collapse at a certain point, can I trigger the event to make it collapse, by making some sort of if else condition?</p>
  
  <p><a href="https://i.stack.imgur.com/CoLa8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoLa8.png" alt="this is the non collapsed version"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1P5xO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1P5xO.png" alt="Collapsed version"></a></p>
  
  <p>how can I make this happen?</p>