web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan et la couleur de police de bootstrap _ navbar

Je souhaite modifier l'arrière-plan et la couleur du texte dans un bootstrap navbar mais cela ne change pas comme prévu ... Voici mon CSS personnalisé:

.navbar-default .navbar-fnt {
    color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
    color: #CC3333;
}

Et le HTML pertinent:

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

Je n'arrive pas à comprendre pourquoi cela ne changera pas l'arrière-plan et la couleur du texte - quelqu'un peut-il aider?

csstwitter-bootstraptwitter-bootstrap-3
33
user2281858

J'ai réussi à styliser ma barre de navigation Bootstrap _ en utilisant le fichier CSS suivant. De plus, vous n'avez défini aucune police dans votre CSS, c'est pourquoi la police ne change pas. Le site pour lequel ce CSS est utilisé peut être trouvé ici .

.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*/
}
46
DivineChef

Pas besoin de la spécificité .navbar-default dans votre CSS. La couleur de fond nécessite background-color:#cc333333 (ou simplement background:#cc3333). Enfin, il est probablement préférable de consolider toutes vos personnalisations dans une seule classe, comme ci-dessous:

.navbar-custom {
    color: #FFFFFF;
    background-color: #CC3333;
}

..

<div id="menu" class="navbar navbar-default navbar-custom">

Exemple: http://www.bootply.com/OusJAAvFqR#

41
Shawn Taylor

Très probablement, ces classes sont déjà définies par Bootstrap. Assurez-vous que le fichier CSS avec lequel vous souhaitez remplacer les classes s'appelle APRÈS le Bootstrap CSS.

<link rel="stylesheet" href="css/bootstrap.css" /> <!-- Call Bootstrap first -->
<link rel="stylesheet" href="css/bootstrap-override.css" /> <!-- Call override CSS second -->

Sinon, vous pouvez mettre !important à la fin de votre code CSS comme ceci: color:#ffffff!important;, mais je vous déconseille d'utiliser !important à tout prix.

6
APAD1