Pourquoi ma barre de navigation et mon menu Hamburger disparaissent-ils sur les écrans plus petits ?

Correction de la disparition de la barre de navigation et du menu Hamburger sur des écrans plus petits

Problème :

Une barre de navigation avec une image de logo au centre fonctionne parfaitement sur les grands écrans. Cependant, lorsque l'écran est réduit, tout disparaît, y compris l'image du logo et le menu hamburger. Comment ce problème peut-il être résolu ?

Solution :

Pour conserver la visibilité sur des écrans plus petits, assurez-vous que la barre de navigation a soit une couleur d'arrière-plan, soit les classes CSS appropriées ajoutées :

• Pour Bootstrap 5 : Utilisez navbar-light ou navbar-dark avec navbar-light bg-light ou navbar-dark bg-dark pour la couleur d'arrière-plan.

<nav>

• Pour Bootstrap 4.0.0 et versions antérieures : Utilisez soit navbar-light bg-light ou navbar-dark bg-dark, ou ajoutez une couleur d'arrière-plan personnalisée via CSS.

<nav>

#navbar-primary .navbar-nav {
  background: #ededed;
}

Vous pouvez également assombrir le curseur du hamburger pour améliorer sa visibilité.

.navbar-toggle .icon-bar {
  background-color: rgb(136, 136, 136);
}

Informations mises à jour :

Pour Bootstrap 5, les classes navbar-light ou navbar-dark sont indispensables pour afficher le menu hamburger.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!