Bootstrap 3 Menu is not collapsing on Ipad

Question

I am doing a project using the new updated Bootstrap 3 RC1.

There are may new features with the new Bootstrap 3 which are much different than the previous versions. I figured most of the changes but one I can't resolve:

when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)

I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks

here are screenshots of my live project:

-- Menu on Big Screens --

-- Menu on Ipad Landscape --

-- Menu on Ipad Portrait --

-- Menu on Mobile --

I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.

any suggestions? Thanks

Answer 1

Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/

The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )

In variables.less you will find @grid-float-breakpoint: @screen-tablet; where @screen-tablet is 768px.

So by default your menu will collapse when the screen width is below the 768px;

The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.

See also navbar.less:

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

To change this behavior you have to change the @grid-float-breakpoint b.e set to 767 and recompile your css files.

NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."

You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).