I am using twitter bootstrap ver. 2.3.2 and I have just realized that my navbar does not work properly if rendered on a mobile device.
The problem is the sub-items of each top menu do not redirect to the page specified in the url.
It works has expected if I resize my browser's window on a desktop computer. I've tested it with an android phone (4.0.3), iPhone 4, and opera mobile emulator.
I've prepared a bootply here which can be rendered here.
This is the HTML:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"> </a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a id="mnuItem_0" href="#" data-target="#" role="button" class="dropdown-toggle" data-toggle="dropdown">HOME<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="mnuItem_0">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/"><i class="icon-home"></i> Home</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" id="LogOff" href="/Authentication/LogOff"><i class="icon-off"></i> Exit</a>
</li>
</ul>
</li>
<li class="dropdown">
<a id="mnuItem_1" href="#" data-target="#" role="button" class="dropdown-toggle" data-toggle="dropdown">USERS<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="mnuItem_1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Roles"><i class="icon-group"></i> Roles</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="/Users"><i class="icon-user"></i> Users</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any help will be appreciated.
There's no solution to this and the bug has been introduced with version 2.3.2 (it works on 2.3.1).
Upgraded to version 3.0.0 ... with some pains.