title: Bootstrap 3 Responsive menu disappears
body: <p>I have a custom Bootstrap 3 website that utilises the "nav-bar" element. Everything was working fine and dandy. I resized the browser window, bam, a button appeared and clicking on it resulted in the menu showing in a vertical manner. </p>
  
  <p>The next day I decided to compress my bootstrap.css with grunt-uncss, since I have a fairly simple website and use only a fraction of the elements provided. Worked fine, no problems(it went from 132.5 kB to 10), until I tested my responsive menu. </p>
  
  <p>When I click the button, the vertical menu layout briefly flashes and then disappears immediately. I can click the items if I am lightning fast, and they will direct me to the correct page. I guess it flashes for half a second or so, and then, bam, it's gone.</p>
  
  <p>I debugged the problem to being in the bootstrap.css file and not in my custom style.css, because replacing the compressed file with the original makes my menu work normal again. </p>
  
  <p>Does anyone know what elements in bootstrap.css cause this? I tried pasting some elements containing "nav-bar" or ".nav-bar" in the compressed css file, but it didn't work.</p>
  
  <p>Here is the code I wrote that is on every page and creates the nav-bar, with the logo(navbar-brand):</p>
  
  <pre><code>   &lt;div id="container"&gt;
      &lt;div class="hidden-header"&gt;&lt;/div&gt;
      &lt;header class="clearfix"&gt;
          &lt;div class="navbar navbar-default navbar-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="index.html"&gt;&lt;img alt="Logo Puntzeven" src="images/layer3.png"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;
                              &lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Extra&lt;/a&gt;
                              &lt;ul class="dropdown"&gt;
                                  &lt;li&gt;&lt;a href="tabs.html"&gt;Tabs&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="feedback.html"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="tarieven.html"&gt;Tarieven&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="about.html"&gt;Over ons&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="services.html"&gt;Voorzieningen&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I apologize if I should have been more compact in my question asking, but I wanted to ensure people understood exactly what I did. </p>
  
  <p>I would rather not replace the normal bootstrap.css with the compressed one, if that is possible.</p>