I am using twitter bootstrap ver. 2.3.2 , and I just realized that my navigator does not work properly if displayed on a mobile device.
The problem is that the sub-items of each top menu are not redirected to the page specified in the URL.
It is expected that if I resize the browser window on the desktop computer. I tested it with an Android phone (4.0.3), an iPhone 4 and an online mobile emulator.
I prepared bootply here , which can be displayed here .
This is 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 would be appreciated.
source share