Бутстрап 3 navbar брендинг цвет

Я использую bootstrap 3 navbar, но не могу по какой-то причине изменить цвет текста бренда или ниспадающие треугольники. я пробовал пару вещей, но все равно не повезло...

 .navbar .nav > .navbar-brand > a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #d6d6d6;
 }

.navbar-brand {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color:  #d6d6d6;
}

.navbar-brand a{
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
     color:  #d6d6d6;
}

Ответы

Ответ 1

Это проблема специфики. Объявление, содержащееся в Bootstrap CSS, более специфично, чем ваше. Пожалуйста, напишите свое выражение таким образом:

.navbar-default .navbar-brand {
    color: #d6d6d6;
}

Просто использование .navbar-brand менее специфично и, таким образом, игнорируется. Вы можете немного прочитать о специфичности здесь.

Ответ 2

В файле bootstrap.css:

.navbar-default .navbar-brand {
  color: #777777;
}

где установлен цвет текста бренда. Я изменил это на color: #ff0000, и он успешно изменился на красный. Чтобы изменить цвет выпадающего треугольника, измените значения цвета здесь

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

Для разных цветов при наведении и т.д. для выпадающих треугольников:

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.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: #ff0000;
  border-bottom-color: #ff0000;
}

Ответ 3

Если ваши стили arent вступают в силу, то это проблема специфичности. Используйте веб-инспектор в Chrome или Safari, и он расскажет вам, какие стили действуют, а также селектор, используемый для применения этих стилей.

Ответ 4

Если ваша навигационная панель черная, вы используете navbar-inverse, поэтому эти решения не будут работать.

Итак, в этом случае используйте:

.navbar-inverse .navbar-brand {
    color: #d6d6d6;
}

Ответ 5

Если другие предложения здесь не работают, просто добавьте

важно!

(Никто из них не работал у меня, пока я не добавил!)

.navbar-brand {
    color: #ffffff  !important;
}