bootstrap: how to stylise navbar when using scrollspy?

Question

It's a good idea to not modify the core files as you are carefully avoiding (good stuff).

Here is a working demo of the explanation below

As you are aware, when writing CSS if you do this:

div {
  background: #666;
  width: 100px;
  height: 100px;
}

and then you do this anywhere that comes after the above snippet:

div {
  background: #000;
  width: 100px;
  height: 100px;
}

It's safe to say that the <div> will be black (#000) because it's defined later (means below) the dark gray #666.

So with that said, since you may come across other .nav classes in your build, it's good that you are giving your .nav another class that is unique so you can hook to it without affecting all the .nav's on your markup.

I would recommend that you make a new stylesheet (probably call it: custom.css) and put a link to it below the bootstrap-min.css inside your <head> element so any style you do to modify something that comes stock in a certain with with bootstrap will be overwritten by your custom.css file.

Simply try this:

.nav.my-style {
  background: #000;
}

You will see that the background will turn black and you successfully did that without modifying the core bootstrap CSS file.

Now this looks a little weird, and if what you wanted to do was modify the whole bar then you would modify the .navbar-inner as it's the one with all the styles you probably want to change.

Here is another fiddle of that in action

Remember to vote up if this was helpful or to select it as an answer so other people searching StackOverflow can find this helpful too.