title: Responsive Bootstrap navbar - menu button for smartphones not showing
body: <p>I have a navbar with dropdown menu. Now I want to make it usable for smartphone users too. I have the bootstrap classes already included, so I thought I could use bootstrap.</p>
  
  <p>I used a <a href="http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/" rel="nofollow noreferrer">generato</a>r for creating me a basic navbar, just to test if it's working.</p>
  
  <p>Here's the result: <a href="https://jsfiddle.net/bwbuqco2/" rel="nofollow noreferrer">https://jsfiddle.net/bwbuqco2/</a></p>
  
  <p>When you resize the window in the fiddle, a menu button for smaller screens will appear. But on my site it doesn't. The navbar just disappears completely on my site and I don't know why.</p>
  
  <p>I deactivated any stylings for my old navbar, but that didnt fix the problem.</p>
  
  <p>If you need any further information, let me know. I have no clue where the problem is.</p>
  
  <p>I would also be open for solutions beside bootstrap.</p>
  
  <p>Here's my navbar structure:</p>
  
  <pre><code>        &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container" style="margin-left:100px;"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;
                          &lt;a href=""&gt;
                              Startseite
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="ueber-mich/"&gt;
                              Über&amp;nbsp;mich
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#anker"&gt;
                              Referenzen
                          &lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="link1/"&gt;link1/&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="link2/"&gt;link2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="link3/"&gt;link3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="link4/"&gt;link4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="link4/"&gt;link4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="link5/"&gt;link5&lt;/a&gt;&lt;/li&gt;                 
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="link6/"&gt;
                              link6
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/nav&gt;--&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.navbar{
  margin-left: -3px;
  margin-bottom: 0;
  background: @color-purple;
  border: none;
  .navbar-nav{
  &gt; li {
  
      &gt; ul {
          text-align: center;
          padding: 0;
          display: none;
          z-index: 1;
          background: rgba(41, 38, 87, 0.7);
          position: absolute;
          visibility: hidden;
          list-style-type: none;
          margin-left: -50px;
  
          &gt;li{
  
              margin: 0 auto;
              display: block;
      &gt; a {
          border: 1px solid @color-purple;
          display: block;
          padding: 1em;
          color: @color-white;
          font-size: 14px;
          font-weight: lighter;
          text-transform: uppercase;
          list-style-type: none;
      }
          &gt;a:hover{
              background: @color-purple;
              text-decoration: none;
              color: @color-white;
              }
  
          }
      }
  
      &gt; a {
          color: @color-white;
          text-align: center;
          font-size: 16px;
          font-weight: lighter;
          text-transform: uppercase;
          padding: 25px 40px 25px 0px;
          list-style-type: none;
      }
          &gt;a:hover{
              color: @color-white;
              text-decoration: underline;
              }
  }
  
  &gt;li:hover{
  
      &gt; ul {
          display: block;
          position: absolute;
          visibility: visible;
      }
  
  }
  
  }
  }
  </code></pre>
  
  <p>Thank you for reading!</p>