twitter-bootstrap - navegacion - crear un navbar con bootstrap
Bootstrap dos barras de navegación que se derrumban (1)
En bootstrap quiero tener dos barras de navegación debajo de la otra. Mi idea: Navbar 1 tiene una marca: menú principal. Navbar 2 (debajo de navbar1) tiene una marca llamada: submenú.
Cuando el usuario mira el sitio en su teléfono móvil, ve dos barras de navegación plegables. El usuario ahora puede elegir qué barra de navegación para abrir. El menú o el submenú.
Acabo de copiar el código estándar en el sitio web bootstrap: http://getbootstrap.com/components/#navbar
Lo extraño es. Cuando hago mi navegador pequeño. Aparecen dos barras de navegación colapsadas. "Menú principal" y "submenú". Cuando hago clic en el botón detrás del menú principal, aparece el menú principal. Al igual que debería. Pero cuando presiono el botón del submenú (uncollapse). El MENÚ PRINCIPAL se abre de nuevo. No es el submenú.
Acabo de usar el código de la barra de navegación estándar del sitio web bootstrap en el enlace pegado debajo de cada uno y cambié los nombres de marca. AQUÍ está el bootply: http://bootply.com/101690 Pruébelo en el móvil y vea qué sucede en las barras de navegación.
Utiliza el mismo valor de identificación para ambas barras de navegación, cambia la identificación para la segunda barra de navegación y el valor de destino de datos correspondiente:
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MAIN menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">MAIN menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sub menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>