Estoy tan confundido sobre por qué no puedo cambiar la propiedad color de la fuente en una barra de navegación en mi aplicación Rails que usa Bootstrap 3. Actualmente tengo una clase configurada llamada navbar-brand2 que está modificando otro enlace propiedades con éxito (como crear un borde), pero no puedo cambiar el color en sí.

CODEPEN

header.html.erb

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
         <a class="navbar-brand" href="#">Home Page</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
          <li class="whatever"><a class="navbar-brand2" href="#">Contact</a></li>
          <li class="whatever"><a class="navbar-brand2" href="#">About Us</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav> 

CSS parcial

.navbar-brand2 {
    font-family: 'Londrina Solid', cursive;
  color: white; 
    font-size: 1.6em;
    letter-spacing: 1.5px; 
    padding-left: 13px;
    padding-right: 13px;
    margin-top: 12px;
    border: white 2px solid;
    border-radius: 12px;
    margin-right: 10px;
}

.navbar-brand2 a {
    color: #F5F5F5; ;
}

.navbar-brand2:hover {
    color: #E4491C;
    border-color: #E4491C;
    text-decoration: none;
}

Otras cosas que he probado

Pensé que tal vez necesitaba hacer referencia directamente a la etiqueta <a> en mi CSS, así que agregué esto también:

.navbar-brand2 a {
    color: white; 
    font-weight: bold; 
}

Sin embargo, es el mismo problema. No he visto nada en la documentación u otras respuestas: ¿necesito hacer algo especial para anular el color predeterminado (lo que significa que mi estrategia al definir una clase nunca funcionará para esta propiedad específica)?

0
darkginger 24 jul. 2016 a las 07:03

2 respuestas

La mejor respuesta

Uso importante para cambiar el color predeterminado

.navbar-brand2 {
    color: white !important;
}

http://codepen.io/nagasai/pen/vKjgwZ

2
Naga Sai A 24 jul. 2016 a las 04:18

Evitaría usar !important cuando sea posible. En su lugar, intente que su selector sea más específico

.nav.navbar-nav .navbar-brand2 {
    color: white;
}

O con menos:

.nav {
    &.navbar-nav {
        .navbar-brand2 {
            color: white;
        }
    }
} 

Aquí tengo un texto estándar que utilizo para crear temas de arranque fáciles de mantener. Consulte las instrucciones en el archivo README.

https://github.com/patrickleet/bootstrap-override-boilerplate

1
Patrick Lee Scott 9 ago. 2016 a las 20:46