title: Bootstrap Scroll Spy is not working
body: <p>I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone checkout my html file and see if they can determine what's wrong and provide me some solutions to this problem?</p>
  
  <p>Here is the link to my github account for this: <a href="https://github.com/thlee1122/profile" rel="nofollow noreferrer">https://github.com/thlee1122/profile</a></p>
  
  <p>Here is how my current navigation section in the html file look like:</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-html lang-html prettyprint-override"><code>body data-spy="scroll" data-target="#navbar-example"&gt;
          &lt;div class = "header"&gt;
              &lt;div class = "container"&gt;
                  &lt;div class="video-section"&gt;
                      &lt;video autoplay muted loop&gt;
                          &lt;source src="macbook.mp4" type="video/mp4"&gt;
                      &lt;/video&gt;
  
                      &lt;div class="section-content container"&gt;
                          &lt;h1&gt;Tae Hoon Lee&lt;/h1&gt;
                          &lt;hr&gt;&lt;/hr&gt;
                          &lt;h4&gt;Interactive Portfolio&lt;/h4&gt;
                          &lt;!--&lt;p&gt;&lt;a class="btn" href="#"&gt;Email Me&lt;/a&gt;&lt;/p&gt;--&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="main" id="profile-intro"&gt;
              &lt;div class="container"&gt;
                  &lt;h1&gt;Profile&lt;/h1&gt;
                  &lt;h3&gt;I'm a creative Front end developer.&lt;/h3&gt;
                  &lt;hr&gt;&lt;/hr&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="top" class="jumbotron"&gt;
              &lt;a href="#profile" class="scroll-down"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
              &lt;/a&gt;
  
              &lt;div class="navbar navbar-default" id="navbar-example" role="navigation"&gt;
                  &lt;div&gt;
                      &lt;div class="navbar-header"&gt;&lt;/div&gt;
                      &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="active"&gt;
                                  &lt;a href="#profile"&gt;Profile&lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class&gt;
                                  &lt;a href="#experiences"&gt;Experiences&lt;/a&gt;
                              &lt;li&gt;
                              
                              &lt;li class&gt;
                                  &lt;a href="#skills"&gt;Skills&lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class&gt;
                                  &lt;a href="#projects"&gt;Projects&lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li class&gt;
                                  &lt;a href="#contact"&gt;Contact&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>