I am unsure of the best way to create a responsive navigation menu for iPad and iPhone using Bootstrap. When I resize the page, a horizontal scroll bar appears, which is not the desired effect.
<div id="navbar-example" class="navbar navbar-static span8" style="margin-top: 20px;">
<!-- navigation -->
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Animal Types</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mammals <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" onclick="return false" id="chimpanzee">Chimpanzee</a></li>
<li><a href="#" onclick="return false" id="lemur">Lemur</a></li>
<li><a href="#" onclick="return false" id="jaguar">Jaguar</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" onclick="return false" id="cobra">Cobra</a></li>
<li><a href="#" onclick="return false" id="eidechse">Eidechse</a></li>
<li><a href="#" onclick="return false" id="iguana">Iguana</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Rodents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" onclick="return false" id="chipmunk">Chipmunk</a></li>
<li><a href="#" onclick="return false" id="beaver">Beaver</a></li>
<li><a href="#" onclick="return false" id="hamster">Hamster</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- content pages -->
Live Example can be found here:
Conclusion:
How can we design sub-level menu pages for iPhones/iPads using Twitter Bootstrap?