Bootstrap Navbar CSS

Question

I've taught myself CSS from things online so far. I feel like I'm doing pretty good but I'm having a heck of a time trying to edit the navbar. I'm working with Boostrap at the moment but I have a question about CSS, in particular Navbar functionality.

I understand how the HTML refers back to the bootstrap.css but while trying to work own the custom css (style.css) I cannot get the navbar to change colors with a top level class. For example changing navbar or navbar-inverse with: .navbar { background-color: white; } won't change the background. I have to go into .brand to change one of the boxes color.

  <div class="navbar-wrapper">
  <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
  <div class="container">

    <div class="navbar navbar-inverse">
      <div class="navbar-inner">
        <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#">------------</a>

Something is overriding it so my question is more from a basic level. Do I have to set the exact element or does the CSS allow me to change an overarching class and it applies to things within that div.

My second question is: is bootstrap.css overriding my custom css?

feitla · Answer 1 · 2013-07-25T19:45:03.187

1

Yes it does sometimes. Use web inspector to see which rules are being applied. If you want your custom CSS to override Bootstrap CSS, then reorder your CSS <link> and list your's last. Or change the bootstrap.css file

EDIT fixed answer

edited Jul 25 '13 at 19:45

answered Jul 25 '13 at 19:27

feitla

1,334
1
7
12

False, you must list your custom CSS file AFTER Bootstrap's to override it ... http://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap – Pascamel Jul 25 '13 at 19:41
I think you meant: 'list yours last', since he needs to override Bootstrap – omma2289 Jul 25 '13 at 19:41
Thanks for catching the wrong phrasing – feitla Jul 25 '13 at 19:53

score 0 · Answer 2 · answered Jul 25 '13 at 19:41

0

I think you can first call bootstrap.css and then call your custom css file, so its overwrite bootstrap css rules.

If still not change default bootstrap css, you can use important attribute.

navbar { background-color: white !important; }

I hope you problem will be solve.

answered Jul 25 '13 at 19:41

Nurul Amin

1
1
1

Using !important is ususally considered as a bad practice – Pascamel Jul 25 '13 at 19:49
I thought I read somewhere that using !important wasn't best practice. When I list my custom.css last and bootstrap.css is more specific than my custom the bootstrap will still trump custom, correct? – John DeLisle Jul 25 '13 at 19:49
thanks @Pascamel for your advice. Yes, its bad practice, but its last tricks, when could not work any solution. I think if call custom css file at end of other file when create css file link, problem will be solve. – Nurul Amin Jul 25 '13 at 20:12

Bootstrap Navbar CSS

2 Answers2