title: Collapsible menu is too long for mobile landscape
body: <p>I'm having an issue with a collapsible menu I created in Bootstrap 3. It works great until its viewed in landscape from a mobile device. When you expand the menu in landscape, the links drop down farther than the viewport. That wouldn't be a problem, but the menu is fixed to the top, meaning the user cannot scroll down to see the hidden links bellow. Whenever the user scrolls, the menu stays put and the elements behind the fixed navbar move (though you cannot see it move because of the menu overlay). Here is a pic:</p>
  
  <p><img src="https://i.stack.imgur.com/igJgM.png" alt="landscape view from iphone"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;                          
              &lt;button class="navbar-toggle" data-toggle="collapse"data-target=".navHeaderCollapse"&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 class="collapse navbar-collapse navHeaderCollapse"&gt;      
                  &lt;ul class="nav nav-justified"&gt;
                      &lt;li&gt;&lt;a id="navHistory" class="history" href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="navEvents" class="events" href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="navSponsors" class="sponsors" href="#"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="navEntertainment" class="entertainment" href="#"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a id="navGallery" class="gallery" href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;            
                      &lt;li&gt;&lt;a id="navContact" class="contact" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;     
                  &lt;/ul&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--Navbar End--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar.navbar-default.navbar-fixed-top {
      background-color: transparent;
      border: none;
  }
  .navbar.navbar-default.navbar-fixed-top .navbar-inner {
      height: 95px;
      background-image: url('../img/top_red.png');
      box-shadow: none;
      border: none;
      -webkit-box-shadow: none;
  }
  .navbar.navbar-default.navbar-fixed-top .navbar-inner .container {
      background-color: #d0112b;
      margin: 0 auto;
  }
  .navbar .nav &gt; li &gt; a {
      font-size: 18px;
      color: #ffffff;
      font-family: 'sanchezregular';
      line-height: 25px;
      text-decoration: none;
      text-transform: uppercase;
      background-color: #d0112b;
  }
  .navbar .nav &gt; li &gt; a:hover, .navbar .nav &gt; li &gt; a:active {
      color: #ffffff;
      background-color: transparent;
  }
  </code></pre>
  
  <p>I tried to set the .nav-justified container to have a max-width of 100%, but I'm still unable to make these links fit or at least scroll. Has anyone else has this problem? Any help would be greatly appreciated!</p>