Bootstrap: Cannot scroll down a collapsed navbar on mobile devices

[clheppell]

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.

[tmorehouse]

One quick fix:

.navbar-collapse {
  max-height: 280px;
  overflow-y: auto;
}

or (but not all browsers support vh units):
```css
.navbar-collapse {
max-height: 0.9vh;
overflow-y: auto;
}

[jacqueslareau]

@tmorehouse While this seems to fix the issue in mobile, it seems to create an issue with dropdowns when in full width.

[tmorehouse]

Might need a few tweaks to the selector to target just when the collapse is opened:

.navbar-collapse.collapse.show {
  max-height: 280px;
  overflow-y: auto;
}

[jacqueslareau]

Thanks it looks like it is "working". But just want to point out that when you resize the browser back to full screen while the collapsed menu is opened, it does the same thing. Looks like the show class is not being cleared. Sorry I don't have time to dig into this. :(

[tmorehouse]

Probably placing this CSS in a media query, based on the breakpoint used in navbar, would control when this rule is applied.

[marcosnakamine]

nav.navbar.fixed-top {
    max-height:100%;
    overflow-y:auto;
}

[clheppell]

A max-height: 100% approach does not work because of the height of the fixed navbar at the the top of the screen, which must be discounted

[s4uron]

nav.navbar.fixed-top {
    max-height: 100%;
    overflow-y: auto;
}

@media (min-width: 992px) {
    nav.navbar.fixed-top {
        overflow-y: visible;
    }
}

works for me. If you have another mobile / desktop breakpoint change the media value.

[milossumic]

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

Try this

[Dygear]

@milossumic's comment on Apr 13th fixed the scrolling issue for me and then broke the drop down menu in the desktop version ...

@s4uron's comment on Sep 15, 2017 did fix the issues on mobile devices while not breaking anything extra on the desktop side of things.

[milossumic]

@Dygear You should put it in media query and use it only for smaller screens that you need. Then it won't break on desktop.

[Wruczek]

Fix as of Bootstrap 4.1:

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

[danielmarsch]

I was desperatly searching for a fix for exactly this problem. Thank you so much!

[brass-machine]

@danielmarsch This isn't 100% reliable, it can break the desktop version in certain situations.

[milossumic]

@danielmarsch This isn't 100% reliable, it can break the desktop version in certain situations.

Use it only on the screen sizes that you need.

[brass-machine]

It would be beneficial to get this fix incorporated at some point so anyone could use BootstrapCDN without having to make custom modifications..

[adriandmitroca]

https://github.com/twbs/bootstrap/issues/23374#issuecomment-418539829

unset isn't too well supported by browsers, the fix should look more like this:

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

[maugithuber]

it really works for me thx

[NormanHuth]

For all navbars:

```navbar-expand-sm {
@media (max-width: 576px) {
.navbar-collapse {
max-height: calc(100vh - 125px);
overflow-y: auto;
}
}
}
navbar-expand-md {
@media (max-width: 768px) {
.navbar-collapse {
max-height: calc(100vh - 125px);
overflow-y: auto;
}
}
}
navbar-expand-lg {
@media (max-width: 992px) {
.navbar-collapse {
max-height: calc(100vh - 125px);
overflow-y: auto;
}
}
}
navbar-expand-xl {
@media (max-width: 1200px) {
.navbar-collapse {
max-height: calc(100vh - 125px);
overflow-y: auto;
}
}
}

[ChooChu]

try this it work for me :D

`
@media screen and (max-width: 1000px) {
.navbar-collapse {
max-height: calc(100vh - 60px);
overflow-y: auto;
}
}

`

[domidevelop]

I am using this. It avoids horizontal scroll bar and browser default scroll bar while collapsing. You can play with desired vh height of the navbar.

.navbar-collapse {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.collapsing {
  overflow-y: hidden;
  overflow-x: hidden;
}

[parisiam]

I've sassed @NormanHuth solution:

@each $name, $width in $grid-breakpoints {
    @if $width != 0 {
        @media (max-width: #{$width}) {
            .navbar-expand-#{$name}.fixed-top .navbar-collapse {
                max-height: calc(100vh - 125px)
                overflow-y: auto;
            }
        }
    }
}

[NormanHuth]

I've sassed @NormanHuth solution:

The 125px depends on how big your navbar is.

[mdo]

Rather than add responsive classes for this, I'm wondering how folks would feel about a .navbar-nav-scroll class that adds a CSS custom property with a fallback default value. See #32037 for what I mean.

[clheppell]

That looks like a good solution to this.

I think my only thought UI wise is how to make it clear that it's scrollable.