Bootstrap 3: opened navbar's content can't scroll on mobile

Question

I need to work with Bootstrap 3's navbar, but it seems to be a little buggy. On my Lumia 820 I checked out the default navbar but I can't scroll the content of the menu inside the navbar. Instead of the menu I can scroll the body behind the menu. On desktop I can scroll the menu's content well with overflow:auto CSS but on my mobile I can't scroll nor auto nor hidden.. Any idea?

Image here: http://i.stack.imgur.com/8lxXj.png

Answer 1

Possibly you're describing open issue #12738 "Can't scroll to last collapsed navbar item on mobile when there are many items"?

Answer 2

I would like to add some fixes to the right solution. Especially to fix collapse animation:

.navbar-nav {
  height: 100vh; // <-- This will fix the collapse animation
}

.navbar-collapse.in {     
   overflow-x: hidden;
   padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}

@media (min-width: 768px) {
    .navbar-nav {
        height: auto;
    }
}

Answer 3

You can fix it just using below jQuery code:

$(".navbar-collapse").css({ maxHeight: $(window).height() - $(".navbar-header").height() + "px" });

Answer 4

Although the issue is already quite old I want to give my solution or better workaround to the problem, maybe it helps somebody.

I had the same problem as webprogramozo for my responsive website on the Safari Browser on my iPhone 4S: I cannot scroll down to the menu-points at the end of the menu. Instead I see the body behind the menu scrolling. To avoid this situation I had the idea to hide the body behind the menu while it is open. This is not a solution, but a good workaround that works for me.

/**
 * Bootstrap menu scroll-problem fix:
 * Makes the content below the menu invisible while the menu is open.
 *
 */
$(document).ready(function() {
    $('.navbar-toggle').click(function () {

        var expanded = $('.navbar-toggle').attr('aria-expanded');

        if (expanded == 'false') {
            $('.main-container').hide();
        } else {
            $('.main-container').show();
        }
    });
});