Twitter Bootstrap Navbar menu scrolling

Question

While using twitter bootstrap 3, on mobile devices menu nabber has horizontal and veritcal scrollers.

It was not there with 2.3 and I couldn't figure out how to disable it and let the menu items extend to full without any scroll-bars.

Answer 1

Another solution, in Boostrap 3.3.4, is adding the following to your CSS:

/* No scrolling for collapsed menu */

.navbar-collapse.in {
    overflow: hidden;
    max-height: none !important;
    height: auto !important;
}

Answer 2

To remove the vertical scrollbar, this bit of CSS worked. I did not have horizontal scrollbars.

@media (max-width: 767px) {
   .navbar-collapse {
      max-height: none;
   }
}

Answer 3

This should do it (if you're abiding CSS 3.0 rules)

 max-height: none;

Answer 4

I just ran into this myself...

Just absolutely position .navbar-default.

The .navbar-collapse div is absolutely positioned and you need to "attach" it to a parent/ancestor element that is NOT statically positioned. So, I just added:

.navbar-default {
    position: absolute;
}

Don't know about Bootstrap 4(which just had it's alpha released), but this seems to do the trick with the Bootstrap 3 nav. I've got a really lengthy nav, and now I can properly scroll down and see all nav items.

Answer 5

This is new to Bootstrap 3.

The best way to do this would be to remove or comment out lines 52 and 53 in /less/navbar.less: https://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 (you can optionally remove line 59) and recompile bootstrap.less.

If you can't recompile Bootstrap with a tool like CodeKit or Grunt, you'll want to write a media query in your css document that singles out and overwrites the .navbar-collapse class maybe like this:

@media (max-width: 767px) {
   .navbar-collapse {
      max-height: auto;
      overflow-x: auto;
   }
}

I haven't actually tested that code above - as I was able to recompile. You may have to include !important or something like that.