How to style non text or anchor elements in the bootstrap navbar

Question

I've figured out how to change background color of things such as the heading in the navbar along with the links but what about the rest of the bar? I'm talking about the area left and right of any links. I assume it's in the following code but I do not know what to edit as it isn't clear. Note: Changing background color has no effect. This is in the bootstrap.css. The color is currently black.

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #8900ff;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

The code below in my style.css has worked to color the background color for the links:

.navbar .navbar-inner .container .nav-collapse > ul > li > a {
    background-color: #E89800;
}

Solved: What I had to do was get rid of the background image like so:

.navbar .navbar-inner {

    background-color: #e89800;
    background-image: none;
  }

It set the background image of the navbar to none and I was able to change the background-color for the rest of the bar.

Response was found: Change background color in navbar fixed menu bar Bootstrap

sulfureous · Answer 1 · 2013-07-25T23:56:33.373

There is a class that ships with bootstrap that is called .navbar-inverse

You can use that class there where you have .navbar (just add on so it looks more or less like navbar navbar-inverse

This will invert the white to black and it's something you can target easily to change as well.

Here is a JS fiddle using only stock bootstrap: Demo

As a final recommendation and to help you understand things better with the CSS in bootstrap. I recommend that you don't modify any bootstrap files and you instead use your own custom.css file (place it after the bootstrap CSS so it weights more) and do your modifications there. Read the bootstrap documentation, it's very short and simple to understand.

You can find the source of this information here: http://twitter.github.io/bootstrap/components.html#navbar , just look for the "Inverted variation" part of the documentation for the navbar and you should be good to go. It's also note worthy to say that there are more things that you can invert, such as buttons with btn-inverse so read the documentation a little more so you can engage in better and simpler programming with bootstrap.

How to style non text or anchor elements in the bootstrap navbar

1 Answers1