bootstrap 3 navbar branding colour

Question

I am using the bootstrap 3 navbar but cant for some reason change the brand text colour nor the dropdown triangles. i've tried a couple of things, but still no luck...

 .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;
}

Answer 1

This is a specificity issue. The declaration contained in Bootstrap's CSS is more specific than yours. Please write your declaration this way:

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

Simply using .navbar-brand is less specific and thus ignored. You may read a little bit about specificity here.

Answer 2

In the bootstrap.css file:

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

is where the Brand text color is set. I changed that to color: #ff0000 and it successfully changed to red. To change the color of the dropdown triangle,change values of color here

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

For different colors on hover etc for the dropdown triangles:

.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;
}