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

The no less implementations I found didnt work

Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w