Изменение цвета фона и цвета шрифта

Я хочу изменить цвет фона и текста в bootstrap navbar, но он не меняется, как ожидалось... Вот мой пользовательский CSS:

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

И соответствующий HTML:

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

Я не могу понять, почему это не изменит фон и текстовый цвет - может ли кто-нибудь помочь?

Ответ 1

Я успешно разработал свой загрузочный навигатор, используя следующий CSS. Также вы не определили шрифт в своем CSS, чтобы шрифт не менялся. Сайт, для которого используется этот CSS, можно найти ЗДЕСЬ

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

Ответ 2

Нет необходимости в специфике .navbar-default в вашем CSS. Цвет фона требует background-color:#cc333333 (или просто background:#cc3333). Наконец, вероятно, лучше всего объединить все ваши настройки в один класс, как показано ниже:

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

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

Пример: http://www.bootply.com/OusJAAvFqR#

Ответ 3

Скорее всего, эти классы уже определены Bootstrap, убедитесь, что ваш CSS файл, который вы хотите переопределить для классов, называется ПОСЛЕ Bootstrap CSS.

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

В противном случае вы можете поместить !important в конец вашего CSS следующим образом: color:#ffffff!important;, но я бы посоветовал не использовать !important любой ценой.