title: Bootstrap navbar hamburger is opening but not closing
body: <p>On a phone sized screen, when I click the hamburger once, the navbar opens fine. When I try to close it, nothing happens - it's stuck. Where have I gone wrong? Here's my html:</p>
  
  <pre><code>        &lt;header class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse"&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="http://{{base_url}}"&gt;My Teams&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;nav class="collapse navbar-collapse" id="teams-navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          {% if user.is_authenticated %}
                          &lt;li&gt;
                              &lt;a href="{% url 'profile_page' user.pk %}"&gt;
                                  My Profile
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="{% url 'logout' %}"&gt;Logout&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      {% else %}
                      {% block login_button %}{% endblock %}
                      {% endif %}
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  </code></pre>