title: Why bootstrap dropdown doesn't work if navbar has fixed height?
body: <p>I have a <a href="http://getbootstrap.com/components/#navbar" rel="nofollow">bootstrap navigation</a> menu with more than 20 items and I want to get a fixed height to navigation therefore the menus that exceed the width of the container do not breaks but are hidden.</p>
  
  <pre><code>ul.fixedHeight {
      height: 50px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Then I checked with jQuery if there is a hidden menu to show the <code>button.navbar-toggle</code> to slidedown and show the hidden menu:</p>
  
  <p>JS:</p>
  
  <pre><code>function showhidebtn(){
      var element = document.querySelector('ul.navbar-nav');
      if((element.offsetHeight &lt; element.scrollHeight) || (element.offsetWidth &lt; element.scrollWidth)){
          $("button.navbar-toggle").removeClass("hidden");
          $("button.navbar-toggle").addClass("visible");
      } else { 
          $("button.navbar-toggle").removeClass("visible");
          $("button.navbar-toggle").addClass("hidden"); }
  } 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media (min-width: 768px) {
      button.navbar-toggle {
          position: absolute;
          bottom: 0;
          margin-left: -50px;
          background: #000;
      }
      button.navbar-toggle.hidden {
          display:none;
      }
      button.navbar-toggle.visible {
          display:block;
      }
  }
  </code></pre>
  
  <p>Lastly I run the function if the window size is greater than 768 or or when it is resized.
  <kbd><a href="http://jsfiddle.net/stakkit/zSuPS/5/embedded/result/" rel="nofollow">jsFiddle demo</a></kbd> </p>
  
  <p>The problem is that when window size is greater than 768 and I click to the button to show the hidden items the slidedown doesn't work, but it works when window size is less than 768.</p>
  
  <p>Any help is appreciated! Thank you!</p>