0

Using Bootstrap 3

I'm trying to access the brand name in the navbar-header to change its link color and I am having trouble figuring out the css selector to use, here is the structure for the relevant portion of my navbar:

<div class="navbar navbar-default navbar-fixed-top">
   <div class="container">
      <div class="navbar-header">            
        <a href="/index.html" class="navbar-brand visible-xs">My Site Name</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
      </div>
   ...
  </div>
</div>

Any help would be appreciated.

Thanks

user2255700
  • 93
  • 2
  • 8
  • 2
    http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 – solimanware Feb 17 '16 at 19:46
  • It's good to add what you have tried, even if it isn't working. – Simon C Feb 17 '16 at 19:53
  • I agree Simon, I had meant to include that but forgot. I had tried different selectors including the post which I voted up, but I messed up the syntax and so it wasn't working. – user2255700 Feb 18 '16 at 21:52

2 Answers2

2

Use the following selector:

.navbar-default .navbar-brand {
  color: #777; /* Your color here */
}

And to change the hover color:

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #555;
    background-color: transparent;
}
Simon C
  • 9,458
  • 3
  • 36
  • 55
Khalid T.
  • 10,039
  • 5
  • 45
  • 53
0

Use the following code 

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* title */
.navbar-default .navbar-brand {
    color: red; /*Change color*/
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.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: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}
solimanware
  • 2,952
  • 4
  • 20
  • 40