Résolu [CSS - BOOTSTRAP] Menu & retour à la ligne

[Wazau]

Bonjour,

Je rencontre un soucis en CSS (/bootstrap 3) avec la création de mon menu vertical.

En effet, je souhaite faire un menu dont certains éléments disparaissent en fonction de la largeur de la fenêtres

Ainsi je souhaite, sur un large ecran, un design du type :

Et sur écran moins large (tablette, smartphone):

Néanmoins l'affichage ressemble à cela en dessous d'une certaine largeur (-> 765px) :

Voici le code HTML :

<header>
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <a href="index.html" class="navbar-brand">(logo) - NOM ASSO</a>
          <div id="navigation" class="navbar-right">
            <ul class="nav navbar-nav">
              <li><a href="#" class="hidden-sm hidden-xs">Lien1</a></li>
              <li><a href="#" class="hidden-sm hidden-xs">Lien2</a></li>
              <li><a href="#" class="hidden-sm hidden-xs">Lien3</a></li>
              <li><a href="#" class="hidden-sm hidden-xs">Lien4</a></li>
              <li><a href="#" class="navConnexion">Connexion</a> </li>
              <li><a href="#" class="navInscription">S'inscrire</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

CSS : Bootstrap 3 et :

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.navbar {
  background: white;
  min-height: 80px;
}
.navbar-brand {
    padding: 0 15px;
    height: 80px;
    line-height: 80px;
}

.navbar-nav > li > a {
    line-height: 50px;
    font-weight: bold;
}
  .navbar-default .navbar-nav>li>a:hover{
    color: #22DDAA;
  }

 

[ArKantiK]

Bonjour @Wazau,


Je pense que la fonction qu'il manque à ton code, ce sont les

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

:
​

body {
background-color:white;   
color:black;
}
@media only screen and (max-width:800px) {
 body {
 background-color:black;
 color:white
 }
}

Le background sera blanc, mais si la taille de la fenêtre est supérieure à 800px, il sera noir et l'écriture sera blanche.

Il suffit d'adapter le code en fonction de ton menu.


Bonne journée,
ArKantiK
​

 

[Wazau]

Cela n'a pas résolut mon problème (d'ailleurs, cela n'avait rien à voir avec mon problème il me semble), néanmoins je me suis débrouillé autrement en cachant le menu de base sur les petits écrans et en le remplacant par un bouton qui affiche par la suite tous mes liens en full width/height

 

[Paul GTP]

Si si, ça a bien à voir avec ton problème.

Les media queries, si tu t'intéresse un peu à CSS, permettent de gérer le responsive design (donc de gérer les "plus petits écrans").
Il t'a donné un exemple, pas une solution à ton problème

Cependant, si tu travailles sur bootstrap, il devrait déjà y avoir du responsive design intégré
Essaie de lire la documentation pour en savoir plus