bootstrap 3 navbar dropdown box couleur

Je suis à l'aide de l'INTERFACE utilisateur plat thème avec bootstrap 3. Le plat de l'INTERFACE utilisateur thème de la barre de navigation ne fonctionne pas correctement et sont nombreux à avoir des problèmes similaires avec elle qui ont posté sur github. J'ai donc décidé d'utiliser la valeur par défaut BS3 barre de navigation et d'écrire ma propre code (avec l'aide d'un autre stackoverflow thread) pour le style le menu la façon dont je le voudrais. Je fais cela en MOINS comme un remplacement css.

Le problème est que je ne peux pas comprendre comment modifier les éléments suivants.

  • de la liste déroulante couleur
  • de la liste déroulante couleur de lien
  • liste déroulante lien hover couleur

Voici le css, je suis en utilisant:

/* 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;
}

Ce produit de la bonne couleur, barre de lien, carets, et la barre d'effets de survol. Mais quand je clique sur un bouton avec un sous-menu, le sous-menu apparaît encore dans le défaut BS gris. Quels cours suis-je manque de modifier la liste déroulante sous-menu couleur d'arrière-plan, la couleur du lien, etc?

bootstrap 3 navbar dropdown box couleur

Grâce

source d'informationauteur Jamie Collingwood

  1. 15

    C'est le CSS pour modifier le menu déroulant style/couleur..

      .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

  2. 3

    Je voudrais aussi ajouter ceci:

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

    En plus de ce 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;
}

    C'est parce que ce dernier ne change la couleur d'arrière-plan lorsque le menu est ouvert, mais une fois revenue, la couleur d'arrière-plan des changements à la valeur par défaut. Vous ne pouvez pas assister à ce juste en cliquant sur le menu déroulant, mais si vous étiez à retarder la transition de la liste déroulante, par exemple en utilisant jQuery ci-dessous, le vol stationnaire, 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 les CSS
    Vous pouvez comparer la bascule liste déroulante avec le hover. Ils travaillent tous les deux.

    jsFiddle sans le CSS en dessus.
    La bascule déroulant semble fonctionner, mais une fois que vous placez et déplacez votre souris loin, il va revenir.

  3. 2

    Si vous utilisez FireFox ou Chrome, vous pouvez utiliser leurs outils de développement pour vérifier ce que CSS est appliqué à la zone de liste déroulante?

    Par exemple, ce que je ferais de Chrome est de faire un clic droit sur la zone de liste déroulante arrière-plan et sélectionnez "Inspecter l'élément". Puis vérifiez que vous avez le droit de l'élément sélectionné. Ensuite, vous devriez être en mesure de vérifier les styles CSS appliqués à cet élément dans le panneau de droite (il a des onglets pour les Styles, Calculé, les Écouteurs d'Événement, DOM des points d'arrêt et des Propriétés dans ma version de Chrome 30.0.1599.101 m)

  4. 0

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