Comment afficher le logo de la barre de navigation Bootstrap et le menu Hamburger sur des appareils plus petits ?

Barre de navigation Bootstrap : affichage des éléments sur des appareils plus petits

Cette question résout un problème où une barre de navigation Bootstrap avec une image de logo disparaît sur des écrans plus petits , gênant l'affichage du logo et du menu hamburger.

La solution réside dans l'utilisation de classes utilitaires appropriées fournies par Bootstrap pour garantir un affichage correct sur tous les appareils.

Bootstrap 5 :

Pour Bootstrap 5, l'inclusion de la classe "navbar-light" ou "navbar-dark" est nécessaire pour l'affichage de l'icône hamburger. Ajoutez simplement l'une de ces classes à votre barre de navigation et le hamburger deviendra visible.

Bootstrap 4 et versions antérieures :

Si vous utilisez Bootstrap 4 ou une version antérieure version, vous pouvez utiliser l'une des solutions suivantes :

• Ajouter une couleur d'arrière-plan : Attribuez une couleur d'arrière-plan à la barre de navigation pour la rendre visible même sans couleur d'arrière-plan spécifiée propriété.
• Assombrir la bascule : Modifiez la couleur d'arrière-plan des barres d'icônes de la bascule pour offrir un meilleur contraste et les rendre plus visibles.

Extraits de code :

Couleur d'arrière-plan :

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

Bascule plus foncé :

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

Mise à jour Bootstrap 4.0.0 :

Dans Bootstrap 4.0.0, la classe "navbar-default" est obsolète. Au lieu de cela, utilisez "navbar-light bg-light" pour une barre de navigation de couleur claire ou "navbar-dark bg-dark" pour une barre de navigation de couleur foncée.

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!