bootstrap: 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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 27 (4 by maintainers)

Commits related to this issue

Fix bug: navbar 清單太長時，無法下拉到最下面 — committed to HackerSir/CheckIn by danny50610 6 years ago

Most upvoted comments

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

Try this

+18

milossumic on Apr 13, 2018

Fix as of Bootstrap 4.1:

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

+13

Wruczek on Dec 5, 2018

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.

s4uron on Sep 15, 2017

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

marcosnakamine on Aug 24, 2017

One quick fix:

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

or (but not all browsers support vh units):

.navbar-collapse {
  max-height: 0.9vh;
  overflow-y: auto;
}

tmorehouse on Aug 20, 2017

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;
  }
}

adriandmitroca on Dec 3, 2019

For all navbars:

  @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;
    }
  }
}

Muetze42 on May 24, 2019

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;
}

domidevelop on Nov 15, 2019