title: Twitter Bootstrap 3 navbar doesn't collapse on mobile devices
body: <p>My navbar code looks is - </p>
  
  <pre><code>&lt;body&gt;
  
          &lt;!--Navbar --&gt;
          &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container-fluid"&gt;
  
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#" style="color: #FFFFFF;"&gt;TALENTMATCH&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="collapse navbar-collapse" id="navbarHeaderCollapse" style="font-size: 13px;"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="/jobs"&gt;JOBS&lt;/a&gt;&lt;/li&gt;
                          {% if current_user.is_authenticated() %}
                          &lt;li&gt;&lt;a href="/profile"&gt;PROFILE&lt;/a&gt;&lt;/li&gt;
                          {% else %}
                          &lt;li&gt;&lt;a href="/login"&gt;SIGN IN&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>But the nabber doesn't collapse on mobile devices or when I shrink the browser size. It just disappears. I saw somewhere that this might be because I might not be setting the meta tag for viewport correctly but I have - </p>
  
  <pre><code>&lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  </code></pre>
  
  <p>How can I debug this issue?</p>