Comment faire pour créer un autre fichier d'amorce de l'effondrement barre de navigation bouton?

Je suis en train de créer une barre de navigation en haut similaire à Udemy en utilisant bootstrap 3. Il contient un aligné à gauche pliable déroulant. Mais la copie navbar-header deux fois n'a pas fonctionné. CSS n'est pas mon point fort. N'importe quelle direction est apprécié.

Comment faire pour créer un autre fichier d'amorce de l'effondrement barre de navigation bouton?

Effondré sur la gauche et un sur la droite.

Comment faire pour créer un autre fichier d'amorce de l'effondrement barre de navigation bouton?

Mise à jour

C'est ce que j'ai jusqu'à présent. Je voudrais que le bouton de regrouper les éléments à adopter le comportement par défaut de bootstrap (avec l'icône de la barre) sur le coin inférieur gauche de la barre de navigation lorsque redimensionnée pour les plus petits écrans.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <header class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>          
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <div class="btn-group header-dropdown nav navbar-nav">
            <button type="button" class="btn btn-success">Select City</button>
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Chennai</a></li>
              <li><a href="#">Bangalore</a></li>
              <li><a href="#">Mumbai</a></li>
              <li class="divider"></li>
              <li><a href="#">Others</a></li>
            </ul>
          </div>
        </li>

        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </header>
</nav>
pourquoi essayez-vous de copier navbar-d'en-tête deux fois ?
Comme je l'ai dit, je suis paumé 🙂 j'ai pensé parce que la icon-bar classe est sous navbar-header j'ai donc dû répliquer.
démarrage de la sangle de documents pour la barre de navigation
Ce que vous avez essayé de partager un peu de code

OriginalL'auteur RubyNoobie | 2014-04-27

  1. 8

    Vous pouvez utiliser un dropdown pour créer le "Découvrir" dans le menu, et certains CSS personnalisé au centre de la marque. Les liens sur la droite aurait à bascule/effondrement sur les petits écrans à l'aide de la navbar-collapse..

    De travail de démonstration: http://bootply.com/133215

    OriginalL'auteur Zim

  2. 0

    Puisque vous n'avez fourni aucun code, il est difficile de déterminer ce qui va mal avec votre projet. Votre déroulant devrait ressembler à quelque chose comme ceci, probablement inséré juste avant les autres éléments de la barre de navigation:

    <div class="btn-group pull-left">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="sr-only">Button text</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

    http://getbootstrap.com/components/#btn-dropdowns

    OriginalL'auteur isherwood