web-dev-qa-db-fra.com

couleur de la boîte déroulante bootstrap 3 navbar

J'utilise le thème de l'interface utilisateur plate avec bootstrap 3. La barre de navigation du thème de l'interface utilisateur plate ne fonctionne pas correctement et beaucoup rencontrent des problèmes similaires avec celui-ci qui ont été publiés sur github. J'ai donc décidé d'utiliser simplement la barre de navigation BS3 par défaut et d'écrire mon propre code (avec l'aide d'un autre thread stackoverflow) pour styler le menu comme je le voudrais. Je fais cela dans MOINS comme un css de substitution.

Le problème est que je ne vois pas comment changer ce qui suit.

  • couleur de la boîte déroulante
  • la couleur du lien de la liste déroulante
  • liste déroulante couleur de survol du lien de la boîte

Voici le css que j'utilise:

/* navbar */
.navbar-default {
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
    color: @clouds;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

Cela produit les effets de barre de couleur, de lien de barre, de curseur et de survol de barre corrects. Mais lorsque je clique sur un bouton avec un sous-menu, le sous-menu apparaît toujours dans le gris par défaut de BS. Quelles classes me manque-t-il pour changer la couleur d'arrière-plan, la couleur du lien, etc. du menu déroulant?

Bootstrap navbar sub menu

Merci

csstwitter-bootstrap-3background-colornavbarsubmenu
10
Jamie Collingwood

C'est le CSS pour changer le style/la couleur du menu déroulant.

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

Démo: http://bootply.com/93475

15
Zim

J'ajouterais aussi ceci:

.navbar-default .dropdown-menu {
     background-color: #3344ff;
     color:#ffffff;
}

En plus de ce que Skelly a dit dans sa réponse:

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
}

En effet, ce dernier ne change la couleur de fond que lorsque le menu déroulant est ouvert, mais une fois rétabli, la couleur de fond redevient la valeur par défaut. Vous ne pouvez pas en être témoin en basculant simplement la liste déroulante, mais si vous deviez retarder la transition de la liste déroulante, par exemple en utilisant jQuery ci-dessous pour survoler, vous pouvez voir ce que je veux dire.

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

jsFiddle avec le CSS ci-dessus Vous pouvez comparer le menu déroulant à bascule avec celui en survol. Ils travaillent tous les deux.

jsFiddle sans le CSS ci-dessus. La liste déroulante des bascules semble fonctionner, mais une fois que vous passez le curseur de la souris et que vous déplacez la souris, elle revient en arrière.

3
Justin

Si vous utilisez FireFox ou Chrome, pouvez-vous utiliser leurs outils de développement pour vérifier quel CSS est appliqué au menu déroulant? 

Par exemple, ce que je ferais dans Chrome est de cliquer avec le bouton droit de la souris sur l’arrière-plan de la liste déroulante et de sélectionner "Élément à inspecter". Ensuite, vérifiez que vous avez sélectionné le bon élément. Ensuite, vous devriez pouvoir vérifier quels styles CSS sont appliqués à cet élément dans le panneau à droite (il contient des onglets pour les styles, les styles calculés, les écouteurs d'événement, les points d'arrêt DOM et les propriétés dans ma version de Chrome 30.0.1599.101 m

2
rom99

J'ai utilisé un générateur de menu BS3 pour créer le code CSS dont j'avais besoin. C'était beaucoup plus facile que d'essayer de traquer les tags dont j'avais besoin pour changer.

0
Jamie Collingwood