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

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.

Answer 2

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

 max-height: none;