bootstrap 3 navbar branding colour

bootstrap 3 navbar branding colour

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

Solutions/Answers:

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

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

Related:  Using Toggle Buttons in place of Check boxes (Rails, Twitter Bootstrap, Simple_form)
.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;
}

Solution 3:

If your navbar is black you are using navbar-inverse, so these solutions won’t work.

So in this case use:

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

Solution 4:

If your styles aren’t taking effect then it’s a specificity issue. Use the Web Inspector in Chrome or Safari and it will tell you what styles are in effect, and also the selector used to apply those styles.

Solution 5:

If other suggestions here do not work for you just add

!important

( None of them worked for me till I added !important )

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

References

Related:  Bootstrap modal: close current, open new