Quiero cambiar el fondo y el color del texto en un bootstrap navbar
pero no cambia como se espera... Aquí está mi CSS personalizado:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
Y el HTML correspondiente:
<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
<div class="navbar-header">
<div class="collapse navbar-collapse">
ul and li
</div>
</div>
</div>
No puedo entender por qué esto no cambia el fondo y el color del texto - ¿alguien puede ayudar?
He estilizado con éxito mi barra de navegación de Bootstrap utilizando el siguiente CSS. Además, no ha definido ninguna fuente en su CSS, por lo que la fuente no cambia. El sitio para el que se utiliza este CSS se puede encontrar aquí.
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}
No es necesaria la especificidad .navbar-default
en su CSS. El color de fondo requiere background-color:#cc333333
(o simplemente background:#cc3333
). Por último, probablemente sea mejor consolidar todas las personalizaciones en una sola clase, como se indica a continuación:
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
..
<div id="menu" class="navbar navbar-default navbar-custom">
Ejemplo: http://www.bootply.com/OusJAAvFqR#
Lo más probable es que estas clases ya estén definidas por Bootstrap, asegúrate de que el archivo CSS con el que quieres anular las clases se llame DESPUÉS del CSS de Bootstrap.
<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->
De lo contrario, puede poner !important
al final de su CSS así: color:#ffffff!important;
pero te aconsejo que no uses !important
a toda costa.