Я пробовал играть с различными классами min/max высот и ширины в CSS и, похоже, не помешал верхнему навигационному бару разваливать мои раскрывающиеся меню. Я бы предпочел фиксированную ширину, но полноэкранное меню было зафиксировано на вершине. Выпадающие меню работают нормально, но когда я уменьшаю ширину окна браузера, он обрушивается. Я удалил переключатель, но не любил бутстрап. Вот код из бутстрапа 2.0:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="./index.html">Brand Name </a>
<ul class="nav">
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search Active Page...">
</form>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-user icon-white"></i> Pages<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">My Pages</a></li>
<li><a href="#">New Page</a></li>
<li class="divider"></li>
<li><a href="#">Share Your Pages</a></li>
<li><a href="#">Page Browswer</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-cog icon-white"></i> Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Upload Images</a></li>
<li><a href="#">Upload Files</a></li>
<li><a href="#">Link Other Accounts</a></li>
<li><a href="#">Manage Labels</a></li>
<li class="divider"></li>
<li><a href="#">Privacy Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
</li>
<li> <img src="img/small_fb_pic.jpg" vspace="5px"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
John<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Logout</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</li>
</ul> <!-- end left justified menu items -->
</div>
</div>
</div>