De multiples supérieure fixe navbar-têtes de Twitter Bootstrap 3 ne fonctionne pas correctement?

html :

<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">Item1</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about">Item2</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#contact">Item3</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#contact">Item4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse main-nav">
<ul class="nav navbar-nav">
<li>
<a href="#">it1d</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about">it2d</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
<h1>HEllO</h1><br>
</div>
</div>
</div>
<!-- FOOTER -->
<div style="clear: both"></div>

css:

body {
padding-top: 50px;
}
.navbar-static-top{
position: fixed;
right: 0;
left: 0;
z-index: 1000;background: #ccc;
}

cliquez ici : http://www.bootply.com/101069

Dans le code ci-dessus, je suis l'aide de deux navbars qui je veux être fixé à la partie supérieure de la page.donc le code ci-dessus fonctionne très bien pour les ordinateurs de bureau et ordinateurs portables, mais quand il est vu dans le mobile.la première barre de navigation est fixe, et la deuxième barre de navigation est en baisse.
donc ce que je dois faire pour résoudre à la fois le navbars en haut dans les ordinateurs de bureau et portables??toute aide serait appréciée??

si vous êtes à la fixation de deux barres de navigation, pourquoi ne pas mettre les deux dans le même conteneur?

OriginalL'auteur User2413 | 2015-01-20

  1. 9

    Vous avez utilisé navbar-static-top pour votre deuxième barre de navigation. Vous devez utiliser navbar-fixed-top pour les deux navbars afin qu'ils restent en haut de la page lorsque vous faites défiler. Vous devrez également ajouter de l'espace (égale à la hauteur de la première barre de navigation) à partir du haut de la deuxième barre de navigation (égale à la hauteur de la première barre de navigation) afin d'éviter le chevauchement, comme ceci: top:50px;
    Voici une mise à jour de votre code sur Bootply: http://www.bootply.com/Xd04ROsODx

    Non en fait je veux à la fois la navbars à être fixé à la partie supérieure et le contenu doit défiler vers le haut..
    Désolé, j'ai bien compris votre question dans le mauvais sens. J'ai mis à jour ma réponse, et la nouvelle bootply, de sorte que les deux navbars sont fixés à la partie supérieure de l'écran lors du défilement

    OriginalL'auteur Guillaume