CODEWITHSUNDEEP
csstwitter-bootstrap
Illep
Illep

Reputation: 16841

Bootstrap changing navigation bar colour

Which parameter of the bootstrap.css file i should edit to change the colour of the nav bar.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

navbar-inverse gives black colour, but i want white. i went through bootstrap.css and changed all attribute color that belongs to navbar-inverse to #fff but nothing worked.

Any clue?

Upvotes: 1

Views: 4151

Answers (1)

Xtigma
Xtigma

Reputation: 26

Customizing the navbar requires overriding multiple selectors. Below is most of what you'll need:

/* This of course assumes you're using .navbar-inverse */

/* Navbar main background */

.navbar.navbar-inverse {
    background-color: white;
}

/* Navbar title */

.navbar-inverse .navbar-brand {
    color: lightgray;
}

/* Focus/hover state for navbar title */

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: black;
}

/* Navbar links default color */

.navbar-inverse .navbar-nav > li > a {
    color: orange;
}

/* Navbar links hover/focus states */

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: pink;
}

/* Active link colors */

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}


/* Mobile toggle button */

.navbar-inverse .navbar-toggle {
    border-color: lightgreen;
}

/* Mobile toggle button hover/focus states */

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #DDD;
}

/* Mobile icon bar colors */

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #CCC;
}

Example: http://jsfiddle.net/McHUc/6/

Upvotes: 1

Related Questions