Why bootstrap dropdown doesn't work if navbar has fixed height?

Question

I have a bootstrap navigation 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.

ul.fixedHeight {
    height: 50px;
    overflow: hidden;
}

Then I checked with jQuery if there is a hidden menu to show the button.navbar-toggle to slidedown and show the hidden menu:

JS:

function showhidebtn(){
    var element = document.querySelector('ul.navbar-nav');
    if((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
        $("button.navbar-toggle").removeClass("hidden");
        $("button.navbar-toggle").addClass("visible");
    } else { 
        $("button.navbar-toggle").removeClass("visible");
        $("button.navbar-toggle").addClass("hidden"); }
} 

CSS:

@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;
    }
}

Lastly I run the function if the window size is greater than 768 or or when it is resized. jsFiddle demo

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.

Any help is appreciated! Thank you!

Answer 1

As said, the height is restricting it from growing when it's supposed to on the button click. However, you could fix this with javascript:

//initially the button is not clicked
clicked=false;
$('button.navbar-toggle').click(function(){
    if(clicked==false)
    {
        //if the button isn't clicked and you click it,
        //let the height grow and make the overflow property as visible
        $('.nav.navbar-nav.fixedHeight').css('overflow','visible');
        $('.nav.navbar-nav.fixedHeight').css('height','auto');
        clicked=true;
    }
    else
    {
       //vice versa when you need to close it
       $('.nav.navbar-nav.fixedHeight').css('overflow','hidden');
       $('.nav.navbar-nav.fixedHeight').css('height','50px');
        clicked=false;
    }

});

DEMO