Bootstrap 3 Menu is not collapsing on Ipad

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

Answers


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).


Just ran into this issue as well. I suggest you visit:

Bootstrap customization

Find the field @grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.

Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.


Need Your Help

MYSQL Optimzation: Fetching Data w.r.t DAY OF THE WEEK

php mysql query-optimization

I have to work on CRON which will be sending email to subscriber weekly on the day they get subscribed. For example if user A subscribed on Thursday and user B subscribed on Wednesday then user A w...

Groovy: How to get Type on which a static method is called?

groovy static-methods

When a static method defined on Base class is called using Child class, How to find it was called on Child class type?:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.