css - navegacion - color de la caja desplegable de la barra de navegación bootstrap 3

navbar css bootstrap change color

Question

Estoy usando un tema de UI plana con bootstrap 3. La barra de navegación del tema de UI plana no está funcionando correctamente y muchos están teniendo problemas similares que se han publicado en github. Así que decidí usar la barra de navegación BS3 predeterminada y escribir mi propio código (con la ayuda de otro hilo de stackoverflow) para darle un estilo al menú como me gustaría. Estoy haciendo esto en LESS como un override css.

El problema es que no puedo descifrar cómo cambiar lo siguiente.

• desplegable color de la caja
• el color del enlace de la caja desplegable
• menú desplegable de enlace de cuadro desplegable

Aquí está el css que estoy usando:

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

Esto produce la barra de color correcta, el enlace de barra, los carácteres y los efectos de desplazamiento de barra. Pero cuando hago clic en un botón con un submenú, el submenú sigue apareciendo en el gris BS predeterminado. ¿Qué clases me faltan para cambiar el color de fondo del menú desplegable, el color del enlace, etc.?

Gracias

Answer 1

Este es el CSS para cambiar el estilo / color del menú desplegable.

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

Demostración: http://bootply.com/93475

Answer 2

Si está utilizando Firefox o Chrome, ¿puede usar sus herramientas de desarrollador para verificar qué CSS se está aplicando en el cuadro desplegable?

Por ejemplo, lo que haría en Chrome es hacer clic con el botón derecho en el fondo del cuadro desplegable y seleccionar "Inspeccionar elemento". Luego compruebe que tiene el elemento correcto seleccionado. Entonces debería poder verificar qué estilos CSS se aplican a ese elemento en el panel del lado derecho (tiene pestañas para Estilos, Computadoras, Escuchas de eventos, Puntos de interrupción DOM y Propiedades en mi versión de Chrome 30.0.1599.101 m)

Answer 3

Usé un generador de menú BS3 para crear el código CSS que necesitaba. Era mucho más fácil que intentar buscar las etiquetas que necesitaba cambiar.

Answer 4

También agregaría esto:

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

Además de lo que Skelly dijo en su respuesta:

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

Esto se debe a que este último solo cambia el color de fondo cuando el menú desplegable está abierto, pero una vez que se revierte, el color de fondo vuelve al valor predeterminado. No puede ser testigo de esto simplemente al alternar el menú desplegable, pero si retrasa la transición del menú desplegable, por ejemplo, usando jQuery a continuación para desplazarse, puede ver a qué me refiero.

$(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'');
    });
});

jsCompruebe con el CSS anterior. Puede comparar el menú desplegable de alternar con el del elemento emergente. Ambos trabajan.

jsFiddle sin el CSS anterior. El menú desplegable de alternar parece funcionar, pero una vez que colocas el mouse sobre él y lo alejas, se revertirá.