Change background color in navbar fixed menu bar Bootstrap

Question

I'd like to change the color of my navbar fixed menu bar in Bootstrap. In application.css.scss I have this:

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

In application.html.erb I have this:

<header class="navbar navbar-inverse navbar-fixed-top">
<nav class="navbar-inner">

Could someone explain why I'm still seeing black as the menu bar background (I suspect I am not matching the classes quite right).

possible duplicate of [navbar color in Twitter Bootstrap](http://stackoverflow.com/questions/9869610/navbar-color-in-twitter-bootstrap) — Rob, Oct 24 '12 at 13:17

score 7 · Accepted Answer · edited Dec 26 '12 at 15:30

7

By default, the nav bar uses a css gradient. This uses the background-image property. You will need to reset this value as well:

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

Update: Added missing brace.

edited Dec 26 '12 at 15:30

Chandresh Pant

answered Sep 18 '12 at 23:27

Ben Rowe

Ben, thanks very much! One question, is it correct to say that the "classes" are really "navbar" and "navbar-inner"? In other words, the "navbar-inverse" and "navbar-fixed-top" are not the classes, but are qualifications added on to the classes? – sploiber Sep 18 '12 at 23:32

score 2 · Answer 2 · edited Oct 28 '15 at 13:27

2

<style type="text/css">
    .navbar {
        background-color:#00FFCC;
        background-image: none;
    }
</style>

just use this code you have some logical errors in your css

edited Oct 28 '15 at 13:27

Robin

answered Dec 31 '14 at 09:11

Utam Sharma

2 Answers2