Stackoverflow Answer: Bootstrap Navbar CSS

Background color of active navbar

by Jesse Johnson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <a class="navbar-brand" href="index.html">Navbar</a>
    <ul class="nav navbar-nav pull-right" id="myTab" role="tablist">
      <li class="nav-item" onClick="move()">
        <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
      </li>
      <li class="nav-item" onClick="move()">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">About</a>
      </li>
      <li class="nav-item" onClick="move()">
        <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Resources</a>
      </li>
      <li class="nav-item" onClick="move()">
        <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Data</a>
      </li>
    </ul>
  </div>
  <div id="myProgress">
    <div id="myBar"></div>
  </div>
</nav>
<div class="container tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">
    <div class="container">
      <div class="jumbotron highlight">
        <div class="information">
          <h2>Internet Privacy<h2>
				<p>Welcome to the website this is where you can find out about Internet Privacy, click <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">HERE</a> to learn more</p>
				<!-- When selecting the "HERE" hyperlink the tab will not become active. -->
			</div>
		</div>
		<div class="row">	
			<div class="col-md-3">
				<div class="jumbotron">
					<p class="inforamtion">This is the grid system</p>
				</div>
			</div>
			<div class="col-md-6">
				<div class="jumbotron">
					<p class="information">This is a different grid size</p>
				</div>
			</div>
			<div class="col-md-3">
				<div...

CSS

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card {
  margin-top: 10px;
  box-sizing: border-box;
  border-radius: 2px;
  background-clip: padding-box;
}

.card span.card-title {
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  text-transform: uppercase;
}

.card .card-image {
  position: relative;
  overflow: hidden;
}

.card .card-image img {
  border-radius: 2px 2px 0 0;
  background-clip: padding-box;
  position: relative;
  z-index: -1;
}

.card .card-image span.card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 16px;
}

.card .card-content {
  padding: 16px;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  box-sizing: border-box;
}

.card .card-content p {
  margin: 0;
  color: inherit;
}

.card .card-content span.card-title {
  line-height: 48px;
}

.card .card-action {
  border-top: 1px solid rgba(160, 160, 160, 0.2);
  padding: 16px;
}

.card .card-action a {
  color: #ffab40;
  margin-right: 16px;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

.card .card-action a:hover {
  color: #ffd8a6;
  text-decoration: none;
}

.navbar {
  background-color: #eee !important;
}
.nav > li > a:focus, .nav > li > a:hover{
   background-color: red;
}
li.active a {
  color: white !important;
  background-color: red;
}

.nav-link:hover {
  background-color: red !important;
  color: #eee;
}

a {
  color: red;
}

.information {
  text-align: center;
}

html,
body {
  height: 100%;
}

#myProgress {
  position: relative;
  width: 100%;
  height: 3px;
}

#myBar {
  position: absolute;
  width: 1%;
  height: 100%;
  background-color: red;
}

.highlight {
  border-bottom: 3px red solid;
  border-radius: 0px !important;
}

.nav-item[aria-selected='true'] {
  background-color: red;
}

JavaScript

if (screen.width <= 699) {
    document.location = "mobile.html";

    function move() {
      var elem = document.getElementById("myBar");
      var width = 1;
      var id = setInterval(frame, 10);

      function frame() {
        if (width >= 100) {
          clearInterval(id);
        } else {
          width++;
          elem.style.width = width + '%';
        }
      }
    }
    $(function() {
      $('#myTab a:first').tab('show')
      $('#myTab li:first').addClass('active')
    });