TotalNFL TotalNFL - 5 months ago 21
CSS Question

Custom Stylesheet not overriding Bootstrap

I've tried putting my CSS file link below the Bootstrap CDN link (as it is now) to being as specific as I can (even putting

background: #ffcc00;
instead of
background-color: #ffcc00;
, because I read somewhere that was supposed to work!)

Screenshot of Fiddle not working:

SS

P.S: Could it possibly be due to me using a CDN instead of hosting it myself? That's my only guess so far.

Fiddle

Answer

why is only three of the drop downs colored, and the big bar not colored????

you are selecting the wrong selector, instead of selection #myNavBar you want to select/target the .navbar-header

.active {
  background-color: #FF8040;
  color: white;
}
.navbar-header {
  background: #fc0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="index.html">Play Games 3.0</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a>
        </li>
        <li class="active"><a href="topgames.html">Top Games</a>
        </li>
        <li><a href="gamelist.html">Game List</a>
        </li>
        <li><a href="vote.html">Vote For Games</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<h1>Welcome to Play Games 3.0!</h1>
<p>You can use the navigation bar above or choose your favorite game from the categories below!</p>

Comments