0

Buenas a todos. Estoy tratando de cambiar el color del dropdown usando Bootstrap 3.

"Nombre_C" se ve en color blanco cuando tiene el mouse encima: introducir la descripción de la imagen aquí

Cuando se quita el mouse se ve en gris: introducir la descripción de la imagen aquí

Lo que quiero cambiar es el color gris a naranja.

HTML:

    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">WP</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#pedidos">PEDIDOS</a></li>
        <li><a href="#productos">MIS PRODUCTOS</a></li>

        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user">
            </span>NOMBRE_C<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Mi Cuenta</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>Cerrar Sesión</a></li>
            </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

CSS:

  .navbar {
  margin-bottom: 0;
  background-color: #f4511e;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;

  .navbar li a, .navbar .navbar-brand {
  color: #fff !important;

  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #f4511e !important;
      background-color: #fff !important;

  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;

.dropdown li a {
      color: #f4511e !important;
2
  • Con los estilos que pones no he conseguido reproducir tu problema. A mí no se me vuelve gris en ningún momento. Deberías poner un ejemplo completo, incluyendo css y html para poder reproducirlo. Commented el 13 ene. 2018 a las 14:06
  • Agregué código HTML.
    – L_C
    Commented el 13 ene. 2018 a las 14:27

1 respuesta 1

2

Puedes sobrescribir el color por defecto de bootstrap con:

.navbar-default .navbar-nav>.open>a.dropdown-toggle{
  background-color: #f4511e !important;
}

Algo así:

.navbar {
  margin-bottom: 0;
  background-color: #f4511e;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.dropdown li a {
  color: #f4511e !important;
}
.navbar-default .navbar-nav>.open>a.dropdown-toggle{
  background-color: #f4511e !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">WP</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#pedidos">PEDIDOS</a></li>
        <li><a href="#productos">MIS PRODUCTOS</a></li>

        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user">
            </span>NOMBRE_C<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Mi Cuenta</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-off"></span>Cerrar Sesión</a></li>
            </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.