Bootstrap data-spy not firing off
<p>I'm working on a profile website for myself and have a <strong><em>'decent'</em></strong> concept up and running.</p>

<p>However it seems as if my navbar's data-spy either isn't firing off or if there is something wrong with my html / css.</p>

<p><strong><a href="https://codepen.io/Todai/pen/grKvjO" rel="nofollow noreferrer">This</a></strong> is a pen with the html / css.
This is the body (relevant data-spy reference):</p>

<pre><code>&lt;body data-spy="scroll" data-target="#navbar" data-offset="50"&gt;
</code></pre>

<p>This is how I've set up the navbar:</p>

<pre><code>&lt;nav id="navbar" class="collapse navbar-collapse"&gt;
  &lt;div class="navbar-header"&gt;

    &lt;button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle"&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;/div&gt;
  &lt;div class="collapse navbar-collapse" id="navBar-target"&gt;
    &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li&gt;
        &lt;a href="#top" &gt; About &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#portfolio" &gt; Portfolio &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;/nav&gt; 
</code></pre>

<p>And here is some of the relevant css:</p>

<pre><code>.navbar-default .navbar-nav&gt;li&gt;a:focus,
.navbar-default .navbar-nav&gt;li&gt;a:hover {
  color: #333;
  background-color: black;
}

.navbar-nav&gt;li&gt;a {
  color: #000000 !important;
}

#navbar {
  margin: 12px 0;
}

.navbar-default .navbar-toggle {
  border-color: #ddd;
} 

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9vw 10vw
  margin-top: 8vw;
  margin-right: 15vw;
  margin-bottom: 8vw;
  background-color: transparent;
  background-image: none;
  border: 1vw solid transparent;
  border-radius: 4vw;
}

.navbar-default .navbar-collapse {
  border-color: #e7e7e7;
}

.nav&gt;li {
  height: 100%;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.nav&gt;li&gt;a:focus,
.nav&gt;li&gt;a:hover {
  text-decoration: none;
  color: #722872;
  background-color: #FFFFFF;
}

.nav&gt;li a:hover {
  color: #722872;
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
</code></pre>

<p>As mentioned, a full working example is on the <strong><a href="https://codepen.io/Todai/pen/grKvjO" rel="nofollow noreferrer">code-pen</a></strong></p>