Dropdown menu does not work after resizing

Question

I'm starting with bootstrap and made a little html template with just a menu header (with dropdown items).

The problem is that after i resize the window to be small enough to force the responsive menu collapse, use the dropdown (navigate) while collapsed, and after that i maximize the window, the dropdown menu item stops working (shows a scroll to view content instead of dropping-down).

Sample code? Just try the "Navbar Template" from bootstrap: http://getbootstrap.com/examples/navbar/

Is there any known fix for this problem?

Tested in Firefox and Chrome.

Answer 1

Update

add this after your Bootstrap's CSS:

@media (min-width: 768px) 
{   
    .navbar-collapse.in{ overflow-y:visible;}
}

--end update

Yes, this look "strange" the "in" class have effect after re-sizing still.

You could remove the class with jquery:

$(document).ready(function() 
{
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {

        if ($window.width() >= 768) {
            $('.navbar-collapse').removeClass('in').addClass('collapse');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});   

Resize code from: Dynamically changing class name based on window size, better solutions to do this: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

Maybe it is also possible to reset the .in class for screenwidth above the breakpoint with a media query.

It seems to be a bug, see: https://github.com/twbs/bootstrap/issues/11243

Answer 2

The other answer didn't work for me, as the collapse class added a display:none; (perhaps a different version of Bootstrap). The solution that worked for me is adding to your responsive CSS:

@media screen and (min-width: 768px){
    .collapse{ display:block;}
}

For me the issue occurred when I Open and then Close the collapsed menu, followed by a resize. Hope this helps.

Answer 3

Forcing auto height on the collapsing element (above breaking point) worked for me.

Find the id or class on the toggle button eg. data-target=".navbar-ex1-collapse" and use min-width (your breaking point):

@media screen and (min-width: 768px){
    .navbar-ex1-collapse { height:auto !important;}
}