title: Collapsed Bootstrap 3 Navbar goes out of bounds (dropdowns)
body: <p>I have a normal Bootstrap 3 fixed navbar in the top of my website which is really nice. The problem I'm facing and discovered the other day was that when the navbar collapses for being accessible in smaller devices, the dropdown items are going off the area designated for the navbar. The picture below explains it best:</p>
  
  <p><img src="https://i.stack.imgur.com/IdRUh.jpg" alt="Problem"></p>
  
  <p>So, the <em>Dugi</em> part is a dropdown menu item. When clicked, the items under it (marked in red) are going beyond the red part of the menu. Isn't the navbar supposed to go down with them and cover up the space?</p>
  
  <p>Anyway, I've obviously touched the navbar's styling and I guess that's where it's going wrong. Here's what I've touched:</p>
  
  <pre><code>.navbar-default {
      background-color: @dry-red;
      background-image: -moz-linear-gradient(top, @dry-red, @mid-red);
      background-image: -ms-linear-gradient(top, @dry-red, @mid-red);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@dry-red), to(@mid-red));
      background-image: -webkit-linear-gradient(top, @dry-red, @mid-red);
      background-image: -o-linear-gradient(top, @dry-red, @mid-red);
      background-image: linear-gradient(top, @dry-red, @mid-red);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@dry-red', endColorstr='@mid-red', GradientType=0);
      border-color: @dark-red;
      overflow: visible;
      max-height: 51px;
  
      @media (max-width: 768px){
          max-height: none;
          height: auto;
      }
  
      @media (max-width: 470px){
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
      }
  }
  
  .navbar-default .navbar-nav&gt;.open&gt;a, .navbar-default .navbar-nav&gt;.open&gt;a:hover, .navbar-default .navbar-nav&gt;.open&gt;a:focus {
      max-height: 51px;
  
      @media (max-width: 768px){
          max-height: none;
      }
  }
  
  .navbar-default .navbar-brand {
      color: @lighten;
  }
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
      color: @lighten-hover;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: @lighten;
  }
  
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
      color: @lighten-hover;
  }
  
  .navbar-default .navbar-nav &gt; .active &gt; a, 
  .navbar-default .navbar-nav &gt; .active &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
      color: @lighten;
      background-color: @dark-red;
  }
  
  .navbar-default .navbar-nav &gt; .open &gt; a, 
  .navbar-default .navbar-nav &gt; .open &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .open &gt; a:focus {
      color: @lighten-hover;
      background-color: @dark-red;
  }
  
  .navbar-default .navbar-nav &gt; .dropdown &gt; a .caret {
      border-top-color: @dark-red;
      border-bottom-color: @dark-red;
  }
  
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:hover .caret,
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:focus .caret {
      border-top-color: @dark-red;
      border-bottom-color: @dark-red;
  }
  
  .navbar-default .navbar-nav &gt; .open &gt; a .caret, 
  .navbar-default .navbar-nav &gt; .open &gt; a:hover .caret, 
  .navbar-default .navbar-nav &gt; .open &gt; a:focus .caret {
      border-top-color: @dark-red;
      border-bottom-color: @dark-red;
  }
  
  .navbar-default .navbar-toggle {
      border-color: @dark-red;
  }
  
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
      background-color: @dark-red;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
      background-color: @lighten;
  }
  
  .nav &gt; .dropdown, .dropdown-menu &gt; li {
      position: relative;
      overflow: visible;
  }
  
  .navbar-collapse.in {
      overflow-y: visible;
  }
  
  @media (max-width: 767px) {
      .navbar-default .navbar-nav .open .dropdown-menu &gt; li &gt; a {
          color: @lighten;
      }
  
      .navbar-default .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
          color: @lighten-hover;
      }
  }
  
  .dropdown-menu:before {
    position: absolute;
    top: -7px;
    right: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }
  
  .dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: 9px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
  }
  
  .nav-center {
      position: absolute;
      width: 91px;
      height: 50px;
      left: 50%;
      margin-left: -45px;
      z-index: 100;
  }
  
  .navbar-inner {
      position: relative;
  }
  </code></pre>
  
  <p>And this is the HTML:</p>
  
  <pre><code>&lt;nav class="website-nav navbar navbar-default navbar-static-top" role="navigation"&gt;
  
      &lt;div class="navbar-inner"&gt;
          &lt;div class="nav-center"&gt;
              &lt;!-- &lt;img src="{{ S_WEB_PATH }}images/brand.png" /&gt; --&gt;
              &lt;div class="nav-brand"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="alt-nav navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"&gt;
              &lt;span class="sr-only"&gt;Toogle 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;/div&gt;&lt;!-- Navigation header --&gt;
  
      &lt;div class="collapse navbar-collapse" id="collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li {{ INDEX_ACTIVE }}&gt;&lt;a href="home"&gt;&lt;span class="glyphicon glyphicon-cloud-upload"&gt;&lt;/span&gt; Home&lt;/a&gt;&lt;/li&gt;
              &lt;li {{ REMOTE_ACTIVE }}&gt;&lt;a href="remote"&gt;&lt;span class="glyphicon glyphicon-globe"&gt;&lt;/span&gt; Remote&lt;/a&gt;&lt;/li&gt;
              &lt;li {{ ZIP_ACTIVE }} class="visible-lg"&gt;&lt;a href="zip"&gt;&lt;span class="glyphicon glyphicon-folder-close"&gt;&lt;/span&gt; ZIP&lt;/a&gt;&lt;/li&gt;
              &lt;li {{ POPULAR_ACTIVE }}&gt;&lt;a href="popular"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; Popular&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              {% if not S_LOGGED_IN %}
              &lt;li&gt;&lt;a href="#register" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-registration-mark"&gt;&lt;/span&gt; Register&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#login" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
              {% else %}
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;span class="badge user-messages"&gt;0&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-bell"&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;span class="badge user-notification"&gt;0&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle valign-middle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-camera"&gt;&lt;/span&gt;&amp;nbsp; My Images&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;All images&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Album 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Album 2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                      {% if S_SERVICE_USED == 'facebook' %}
                          &lt;img src="https://graph.facebook.com/{{ S_USERNAME }}/picture" height="24px" class="img-circle avatar" alt="Avatar"&gt;
                      {% else %}
                          {% if S_USER_AVATAR != '' %}&lt;img src="{{ S_AVATAR_PATH }}" id="my_avatar" height="24px" class="img-circle avatar" alt="Avatar"&gt;{% else %}&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;{% endif %}
                      {% endif %}
                      &amp;nbsp;&lt;span class="{% if S_SERVICE_USED == 'facebook' or S_USER_AVATAR != '' %}valign-middle{% endif %}"&gt;{{ S_USERNAME }}&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="{{ S_WEB_PATH }}user/{{ S_USERNAME }}"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Me&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#settings" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt; Settings&lt;/a&gt;&lt;/li&gt;
                      {% if S_SERVICE_USED != 'facebook' and S_SERVICE_USED != 'twitter' %}&lt;li&gt;&lt;a href="#profile" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Edit Profile&lt;/a&gt;&lt;/li&gt;{% endif %}
                      &lt;li&gt;&lt;a href="{{ S_WEB_PATH }}user/do/logout"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; Logout&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              {% endif %} 
          &lt;/ul&gt;   
      &lt;/div&gt;
  &lt;/nav&gt;&lt;!-- Navigation --&gt;
  </code></pre>
  
  <p>Anything other than this, there is nothing I've touched. I've tried fixing this in the <code>.navbar-default</code> by adding this in it:</p>
  
  <pre><code>@media (max-width: 768px){
      max-height: none;
      height: auto;
  }
  </code></pre>
  
  <p>This didn't do anything. </p>
  
  <p>Any help would be highly appreciated as it's really irritating to see this happening and having no clue where it's coming from. Could this be Bootstrap's problem? I doubt it.</p>