Bonjour à tous,

Je galère depuis cette après-midi à modifier l'emplacement du toggle dans la navbar avec navbar-collapse
Prenons l'exemple de cette navbar sur le site de Bootstrap :

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <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 class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Il y a 3 éléments : navbar-brand (le titre du site), et deux ul avec navbar-nav (un à côté du titre, l'autre à droite). De base, quand on rétrécie la fenêtre, les deux ul avec navbar-nav disparaissent dans le toggle, en le plaçant tout à droite.

Le résultat que j'aimerai obtenir : seul le navbar-nav de gauche à côté du titre doit se retrouver dans le toggle une fois la fenêtre rétrécie, placée à gauche du titre, et le navbar-nav de droite reste à sa place.

Un exemple ? Rétrécissait la fenêtre avec le site de Grafikart, c'est exactement ça. J'ai beau fouillé son code, je n'arrive pas du tout au même résultat (je ne cherche pas à modifié dont le toggle apparait quand on clique dessus).

Si quelqu'un a une idée, je suis preneur. Je sais qu'une grosse partie de la modification se fait côté CSS.

Merci d'avance.

7 réponses


Lartak
Réponse acceptée

Tu n'as pas l'air d'avoir compris comment fonctionne le toggle, prbaron te l'a pourtant brèvement expliqué.
Le toggle ce fait sur l'id navbar et probablement (peut-être), sur la classe navbar-collapse collapse.
Pour mieux comprendre, tu peux regarder le tutoriel : Menu responsive.

Bonjour,
il te faut sortir ta .navbar-nav.navbar-right de la div .navbar-collapse

JeremyB
Auteur

Salut prbaron,

Voici le résultat que tu donnes. A droite, il se décale verticalement et lorsque tu rétrécies, le .navbar-right passe en dessus du .navbar-brand Or J'aimerai que le .navbar-right reste comme par défaut aligner à droite et lorsque tu rétrécies, il reste à droite et le toggle comprenant .navbar-collapse peut être soit à droite de .navbar-right, soit à gauche de .navbar-brand (comme sur Grafikart.fr, l'élément de droite reste toujours à droite sans jamais entrer dans le toggle qui lui passe à gauche).

JeremyB
Auteur

Euh je suis bien d'accord avec puisque dans le lien du résultat (que je remets ici), j'ai bien mis un dehors de l'id navbar pour qu'il ne soit pas dans le toggle. Lance la visualisation dans le lien et tu verras qu'il y a un décallage, qu'il n'est pas pris dans le toggle et que le toggle est à droite mais pas completement à droite et que lorsque tu rétrécies la fenêtre, ça ne fait pas comme ici sur grafikart.

Je vais lire le lien que tu as donné, je comprendrai peut être mieux.

dans l'exemple que tu fournis, il te faut ajouter la classe .pull-left à la div .navbar-collapse. Cela te donnera le rendu que tu souhaites sur pc. Pour la version mobile, il te faudra toi même overrider le code existant.

JeremyB
Auteur

La solution la plus simple aura été de passer sur le code expliqué dans le tutoriel que Lartak m'a donné. Plus simple a modifié à mon goût et j'ai réussi à avoir exatcement ce que je voulais.

Merci à tou les deux, sujet résolu.

De rien, avec plaisir.