Bootstrap - Change Color of navbar-fixed-top?

Question

I have:

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

And I want to change the color of the navbar class above. I have tried using this code unsuccessfully to brute force changing the color:

.navbar {
  .navbar-inner {
    background-color: #2c2c2c;
    background-image: none;
  }
}

/* navbar */
.navbar-fixed-top {
    background-color: #990099;
    border-color: #E7E7E7;
}

NOTE: I tried the solution of a related question using TWBSColor but it didn't work unless I changed navbar-fixed-top to navbar which I don't want to do.

this seems to work fine. Can you clarify what color you want your `
` to be? What order are you loading your css? — scniro, May 14 '15 at 00:24
There is CSS to override. See this example: http://bootply.com/qTu1FldGZl — Zim, May 14 '15 at 11:13

score 2 · Accepted Answer · answered May 14 '15 at 01:21

2

To override the Bootstrap css you have to place your custom CSS BELOW the link to bootstrap.

It is the class Navbar-inverse that you need to change or replace with your own custom CSS.

Just changing the navbar-inverse will do it.

answered May 14 '15 at 01:21

AngularJR

2,724
2
15
19

score 1 · Answer 2 · answered May 14 '15 at 01:53

1

As AngularJR said, you either have to add your css after the bootstrap css include or add !important to the css rule you want changed

answered May 14 '15 at 01:53

TripsLeft

541
7
24

Bootstrap - Change Color of navbar-fixed-top?

2 Answers2