▷Cambiar el color de la barra de navegación en Twitter Bootstrap ✔️ Foro Ayuda 【 2024 】

Solución:

tl; dr – TWBSColor – Genera tu propia barra de navegación Bootstrap

Notas de la versión:
– Herramienta en línea: Bootstrap 3.3.2+ / 4.0.0+ – Esta respuesta: Bootstrap 3.0.x

Barras de navegación disponibles

Tienes dos barras de navegación básicas:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Uso de color predeterminado

Estos son los colores principales y su uso:

#F8F8F8: fondo de la barra de navegación
#E7E7E7: borde de la barra de navegación
#777: color predeterminado
#333: color de libración (#5E5E5E por .nav-brand)
#555: color activo
#D5D5D5: fondo activo

Estilo por Defecto

Si desea poner un estilo personalizado, aquí está el CSS que necesita cambiar:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .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;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

Ejemplos de barras de navegación de colores personalizados

Aquí hay cuatro ejemplos de una barra de navegación de color personalizada:

Y el código SCSS:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

Y finalmente, un regalito

Acabo de hacer un script que te permitirá generar tu tema:
TWBSColor – Genere su propia barra de navegación Bootstrap

[Update]: TWBSColor ahora genera código SCSS / SASS / Less / CSS.
[Update]: A partir de ahora, puede utilizar Less como idioma predeterminado proporcionado por TWBSColor
[Update]: TWBSColor ahora admite la coloración de menús desplegables
[Update]: TWBSColor ahora permite elegir su versión (se agregó compatibilidad con Bootstrap 4)

Actualización 2020

Cambiar el color de la barra de navegación es diferente (y un poco más fácil) en Bootstrap 4. Puede crear una clase de barra de navegación personalizada y luego hacer referencia a ella para cambiar la barra de navegación sin afectar a otros navegadores Bootstrap.

<nav class="navbar navbar-custom">...</nav>

Bootstrap 4.3+

El CSS necesario para cambiar la barra de navegación es mucho menor en Bootstrap 4 …

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Demostración de la barra de navegación personalizada de Bootstrap 4

Cambiar el enlace activo / flotante antecedentes color también funciona con el mismo CSS, pero debe ajustar el relleno si desea que el color bg llene la altura completa del enlace …

py-0 para eliminar el relleno vertical de toda la barra de navegación …

<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4 Demostración de cambio de enlace y color de fondo

Ver también: Bootstrap 4 Cambiar el color del conmutador de hamburguesa

** Bootstrap 3 **

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="https://foroayuda.es/#">Title</a>
  </div>
   ...
</nav>


.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}
  
.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}
      
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}
     
.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

Demostración personalizada de Navbar en Bootply

Si la barra de navegación tiene menús desplegables, agregue lo siguiente para cambiar los colores del menú desplegable:

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

Demostración con menú desplegable

Si quieres cambiar los colores del tema todos juntos (más allá de la barra de navegación), vea esta respuesta

Me tomó un tiempo, pero descubrí que incluir lo siguiente fue lo que hizo posible cambiar el color de la barra de navegación:

.navbar{ 
    background-image: none;
}

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Cambiar el color de la barra de navegación en Twitter Bootstrap