Cannot scroll down a collapsed navbar on mobile devices

When visiting a site using a mobile device with a navbar with .fixed-top, if the opened navbar-collapse area runs beyond the end on the viewport vertically (due to lots of links etc), you cannot scroll down the the links at the bottom of the navbar as you can in Bootstrap 3.

When you do try to scroll, the body behind the navbar scrolls, with the navbar fixed in place.

This can be fixed by setting overflow-y: auto; and adding a max-height:Xpx to the .collapse.show class and allows you to scroll the navbar-collapse area.

This happens in (the ones I tested) major browsers (Safari, Chrome, both on the latest updates). I haven’t yet tried whether this fix breaks anything elsewhere.

[milossumic]

.navbar-collapse { max-height: calc(100vh - 60px); overflow-y: auto; }

Try this

[Wruczek]

Fix as of Bootstrap 4.1:

@media (max-width: 991px) {
    .navbar {
        overflow: auto;
        max-height: 85vh;
        align-items: flex-start;
    }
}