collapse - Bootstrap 3 Menu is not collapsing on Ipad -

i doing project using ~~the new updated~~ bootstrap 3 rc1.

there may new features new bootstrap 3 different previous versions. figured of changes 1 can't resolve:

when menu has many items breaks in ipad , other tablets becuase doesnt collapsed automatically collapsed on mobile (which good)

i know how "force" ipads act mobile , show collapsed menu or better yet - how collapse menu if has many items , on screens , smaller breaks

here screenshots of live project:

-- menu on big screens --

enter image description here

-- menu on ipad landscape --

enter image description here

-- menu on ipad portrait --

enter image description here

-- menu on mobile --

enter image description here

i want ipad act mobile. notice portrait act mobile far content not menu.

any suggestions? thanks

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

in variables.less find @grid-float-breakpoint: @screen-tablet; @screen-tablet 768px.

so default menu collapse when screen width below 768px;

the ipad landscape has screen width of 1024px menu not collapse. ipad portrait screen width 768 px menu not collapse.

see navbar.less:

// responsive navbar // --------------------------------------------------  @media screen , (min-width: @grid-float-breakpoint) {

to change behavior have change @grid-float-breakpoint b.e set 767 , recompile css files.

nb mentioned: "notice portrait act mobile far content not menu."

you use "col-lg-" prefix grid rows. "col-lg-" elements stack below 992px (ipad portrait) , become horizontal above 992px (ipad landscape).

Copy