328 votos

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

¿Cómo haría para modificar el CSS para cambiar el color de la barra de navegación en Twitter Bootstrap 3?

748voto

zessx Puntos 17769

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

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 por defecto

Aquí están los colores principales y su uso:

  • #F8F8F8 : fondo de navbar
  • #E7E7E7 : navbar border
  • #777 : color por defecto
  • #333 : el color del aire ( #5E5E5E para .nav-brand )
  • #555 : color activo
  • #D5D5D5 : fondo activo

Estilo por defecto

Si quieres poner un estilo personalizado, aquí está el CSS que tienes que 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 4 ejemplos de barras de navegación de colores personalizados:
JSFiddle link

enter image description here

Y el código SCSS:

$bgDefault      : #e74c3c;
$bgHighlight    : #c0392b;
$colDefault     : #ecf0f1;
$colHover       : #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 pequeño regalo

Acabo de hacer un script que le permitirá generar su tema :
TWBSColor - Genera tu propia barra de navegación Bootstrap

[Actualización] : TWBSColor ahora genera el código SCSS/SASS/LESS/CSS.

Los comentarios, los avisos son bienvenidos.

69voto

Skelly Puntos 27772

Puedes 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 otras barras de navegación de Bootstrap

<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="#">Title</a>
  </div>
   ...
</nav>

CSS

.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}
.navbar-custom .navbar-brand {
    color:#eeeeee;
}

Demo en Bootply: http://bootply.com/78010

30voto

Bass Jobsen Puntos 18262

Usando menos

También podrías considerar compilar tu propia versión. Pruebe http://getbootstrap.com/customize/ (que tiene una sección aparte para la configuración de las barras de navegación (Barra de navegación predeterminada y Barra de navegación invertida)) o descargue su propia copia de: https://github.com/twbs/bootstrap . Encontrará la configuración de la barra de navegación en variables.less. navbar.less se utiliza para compilar la barra de navegación (depende de variables.less y mixins.less).

copie la "sección de la barra de navegación por defecto" y rellene sus propios ajustes de color. Cambiar las variables en variables.less será la forma más fácil (cambiar la barra de navegación predeterminada o inversa no será un problema porque sólo tienes una barra de navegación por página). : En la mayoría de los casos no cambiará todos los ajustes:

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

También podrías intentarlo: http://twitterbootstrap3navbars.w3masters.nl/ esta herramienta genera código CSS para tu barra de navegación personalizada. Opcionalmente puedes añadir colores y bordes degradados a la barra de navegación también.

3voto

Theo Puntos 19

Si sólo se trata de cambiar el color de la barra de navegación, mi sugerencia sería usarla: Bootstrap Magic . Puedes cambiar los valores de las diferentes propiedades de la barra de navegación y ver una vista previa. Descarga el resultado como una hoja de estilo CSS personalizada o como un archivo de variables MENOS. Puedes cambiar los valores con los campos de entrada y los selectores de color. Y

1voto

Saurabh Kumar Puntos 704

Pruebe esto también. Esto funcionó para mí.

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X