title: Navbar-toggle Button doesn't show collapsed elements
body: <p>I'm currently trying to create a button that will reveal me the collapsed navigation links when the screen gets too small. The button does materialize, but I can't get it to perform anything besides appearing when the screen gets small.</p>
  
  <p>The toggle button also creates small '>' arrows when I only intended to have the white "-" lines in the button.</p>
  
  <p>I realized that jquery and bootstrap's js files should be included at the bottom of the body tag, but so far I've had no luck even with those added. Any help is appreciated.</p>
  
  <p><a href="https://codepen.io/Tintinator/pen/NvKRvO" rel="nofollow noreferrer">https://codepen.io/Tintinator/pen/NvKRvO</a></p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-static-top navbar-inverse"&gt;
  
    &lt;div class="container"&gt;
  
      &lt;!-- BRAND, BUTTON --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-
        toggle="collapse" data-target=".navbar-nav"&gt;
          &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="./newnewfoy.png"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- NAV LINKS --&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav" id="navilinks"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Event&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link disabled" href="#"&gt;Volunteer&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link disabled" href="#"&gt;Sponsors&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link disabled" href="#"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="medialinks hidden-sm hidden-xs"&gt;
          &lt;a id="YOUcon" class = "mediacon" href="www.google.com"&gt;&lt;/a&gt;
          &lt;a id="IGcon" class = "mediacon" href="www.google.com"&gt;&lt;/a&gt;
          &lt;a id="TWTcon" class = "mediacon" href="www.google.com"&gt;&lt;/a&gt;
          &lt;a id="FBcon"  class="mediacon" href="www.google.com"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>