Bootstrap: can't scroll long navbar to see items not displayed when expanded on mobile display

[lvmajor]

The problem arises if you have a long navbar.

On mobile display, the navbar will use the collapse.js script and when expanded (.collapse.in), if there are too much items to be shown on the page height, you simply lose the other items as you can't scroll to see overflowed items as shown in the next image:

You can scroll and the underlying page will scroll but not the menu content.

Operating system: Windows 10
Browsers: Chrome 52.0.2743.82, Edge 25.10586.0.0

[lvmajor]

The solution I came up with was to modify the _animation.scss file where the .collapse class is defined (around line 10).

From:
` .collapse {
display: none;

&.in {
    display: block;
}
// tr&.in    { display: table-row; }
// tbody&.in { display: table-row-group; }

} `

To:
`.collapse {
display: none;

&.in {
    display: block;
    overflow-y: auto;   
    max-height: calc(100vh - #{$navbar-height});
}
// tr&.in    { display: table-row; }
// tbody&.in { display: table-row-group; }

}`

Where $navbar-height is defined in _variables.scss or _custom.scss in my case for the quick fix until resolved by any method if not mine.

I made a quick ply to show the result: http://codeply.com/go/DzSudBUrhe

[mdo]

We won't be doing any height calculations on our end—too much variance across devices and viewports. If you need your navbar to be that long with that many links, you should take precautions to not overload it for mobile users. Those links are hidden on mobile and as such will see much less interaction as-is.

[lvmajor]

Okay obviously this was an exaggerated example. In a real case scenario, I have far less links than that on my navbar but then I have some dropdown menus which make it take more height when expanded and this can become a problem on many mobile devices... I would be thankful if you could reconsider your position on this one as it can be a real problem. I don't say we must recalculate as I did but there might be another alternative other than simply wiping the problem away saying it will never happen.

IMO 7 links on a navbar is not over the top and can represent a lot of sites usage for navbars...

What do you think about the dropdown usage?

[jharris4]

I'm hitting the same issue. For what it's worth, I also have about 7 links and also find that this is not over the top for showing in a mobile navbar