Twitter Bootstrap navigation working on desktop but not mobile

I'm using the collapsing navigation menu from Twitter Bootstrap as demoed here: http://twitter.github.com/bootstrap/examples/starter-template.html

It works fine when I test it in browsers on the desktop by resizing the browser window but nothing fires when I test it on my mobile (iPhone 4s).

The sample page above from Bootstrap works on my mobile so I've been comparing both and can't figure out what's causing it not to fire.

Anyone run into this problem before?

Answers


I remember facing the same issue. Anyway, this is what I did.

Put the following in head section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hope this helps.


I updated bootstrap code to version 2.3.0 and mobile started working beautifully.


I had exactly the same problem with tabbed navigation.

Worked fine on desktop but as soon as I went to iphone/ipad - dead.

It just made the #page-name appear in the URL.

But I missed a trick - I forgot to add this...

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

Boom tabs now work on iphone/ipad


Need Your Help

SQL Database - Update Record via PHP Form. No Errors, but no update.

php sql forms phpmyadmin

Hoping this is the right area to be putting this. At current I'm working on a little project for fun and at the same time attempting to teach myself some PHP. I've created a little 'Audit' page tha...

How to style paper-dropdown-menu (how to use mixins?)

polymer mixins web-component paper-elements

I want to style paper-dropdown-menu, specifically for example the paper-input components of the element. I guess I need to learn/understand how mixins work.