title: Bootstrap scrollspy not working in mobile
body: <p>I am working on the site: <a href="http://indraply.in" rel="nofollow noreferrer">http://indraply.in</a>
  The scrollspy is working fine on desktop but when I run the site on smaller devices like mobile, it doesn't run. <br />
  <strong>HTML CODE</strong></p>
  
  <pre><code>&lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt;
     &lt;div class="loading"&gt;&lt;p&gt;WELCOME TO THE WORLD OF PLYWOOD&lt;/p&gt;&lt;/div&gt;
     &lt;a id="home"&gt;&lt;/a&gt;
     &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
       &lt;div class="container-fluid"&gt;
       &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
         &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
         &lt;/div&gt;
  
         &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
         &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li class="active"&gt;
                 &lt;a href="#home" data-toggle="collapse" data-target="#myNavbar"&gt;HOME&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#products"&gt;OUR PRODUCTS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#brands"&gt;OUR BRANDS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#gallery"&gt;GALLERY&lt;/a&gt;&lt;/li&gt; 
             &lt;/ul&gt;
     &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p><strong>SCROLLSPY JAVASCRIPT CODE</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      // Add scrollspy to &lt;body&gt;
      $('body').scrollspy({target: ".navbar", offset: 50});
      // Add smooth scrolling on all links inside the navbar
      $("#myNavbar a").on('click', function(event) {
          // Make sure this.hash has a value before overriding default behavior
          if (this.hash !== "") {
              // Prevent default anchor click behavior
              event.preventDefault();
  
              // Store hash
              var hash = this.hash;
  
              // Using jQuery's animate() method to add smooth page scroll
              // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
              $('html, body').animate({
                  scrollTop: $(hash).offset().top
              }, 1000, function(){
  
                  // Add hash (#) to URL when done scrolling (default click behavior)
                  window.location.hash = hash;
              });
          }  // End if
  
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any solutions?</p>