0

I have been trying to change the color of a bootstrap navbar. I have found plenty of answers but they are all different and vary greatly (three lines or fifty lines) or do not work. What is the most effective way to do this?

Here's my code. It's the w3schools tutorial which I have broken down to understand it better.

* {
  margin: 0;
  padding: 0;
}

navbar-default {
  background-color: aqua;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">

      <!-- Button nav for small screens -->

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
      <!-- Brand name -->

      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <!-- Makes nav not expand on resize -->

    <div class="collapse navbar-collapse" id="myNavbar">

      <!-- Menu -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>

        <!-- Dropdown menu -->
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <!-- Non dropdown -->
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
DaniP
  • 37,813
  • 8
  • 65
  • 74
natem1270
  • 207
  • 1
  • 6
  • 18
  • 1
    Actually your code works http://www.bootply.com/NPm9HNfx8f ... doesn't work on the snippet due to the order and also you miss a `.` dot for the classname on CSS – DaniP Mar 21 '17 at 20:20
  • 1
    http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 – Benneb10 Mar 21 '17 at 20:22
  • I think you can download customized bootstrap from its website using this link : http://getbootstrap.com/customize/#download. so you do not have to write additional overwrite CSS – Nimmi Mar 21 '17 at 20:22

2 Answers2

3

You basically missed a . in your css. Because it is a class, you need a . before the class name in the stylesheed (.css file). If it would be an id you would need a # in front of the name.

Hope I could help :)

PS: Here a JSFiddle to demonstrate. Css-File is on the top left corner.

DerLauskop
  • 134
  • 1
  • 13
1

Normally I do it by assigning an ID as your code can sometime require you to put an ! At the end. Which is not a good practice. Otherwise your code will work fine. Hope this helps!

neophyte
  • 6,540
  • 2
  • 28
  • 43
  • My code works without the !important and using a class. Would it be a good idea to change it to an id regardless? – natem1270 Mar 21 '17 at 22:44
  • 1
    That's the way I work with bootstrap classes. Apart from the logic mentioned in the answer the other logic is suppose if you are using dual navbar and you want them to be of different colors then using class won't work. But if you're using a single navbar then no problem. But generally you should keep this practice of using Id s as we use many a bootstrap components through out our page many times and want them to have different styling. – neophyte Mar 22 '17 at 01:58