Bootstrap 3, change li.active for nav - css

Question

So, I'm playing around with Bootstrap, I'm a total noob. At any rate, to change the nav-brand, I had to use:
.navbar-brand {
color: #da212f!important;
text-shadow: 2px 2px 2px #DDD;
}
That said, I had to use the !important declaration to get the text color to change. Is there a way around that (I'm just curious).
The problem is, I'm trying to change the background color and the font color for the li.active in the nav bar.
Here is the HTML
<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Mr. Robot</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
For the life of me, I can't get the background color to change and I'd like to know how to change the font color as well.
Here was the CSS Options I've tried:
Option 1
li.active {
background-color: #da212f!important;
color: #fff!important;
}
Option 2
.navbar-nav > li.active {
background-color: #da212f!important;
color: #fff!important;
}
I've tried both, with and without the !important declaration. So, if someone could help me and point me in the right direction, I'd appreciate it.

Answer 1

For the logo brand you can add an id to the navbar-brand element and that will give it higher css specificity.
#myBrand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
For the active link you use the following
.nav.navbar-nav > li.active a{
background: none;
background-color: #da212f;
color: #fff;
}
#myBrand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
.nav.navbar-nav > li.active a{
background: none;
background-color: #da212f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="myBrand" class="navbar-brand" href="index.html">Mr. Robot</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Answer 2

Try this
.navbar-header > .navbar-brand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
As there is a div with class="navbar-header" and then in that div you can find an anchor tag with calss = "navbar-brand" where you have done branding as "Mr. Robot".
For active li tag:
.nav.navbar-nav > li.active a{
background-color: #da212f;
color: #fff;
}
Adding a screenshot for your reference.

Answer 3

To achieve expected result, use below CSS
.navbar-default .navbar-nav>.active>a:active{
background-color: #da212f;
color: #fff;
}
.navbar-brand {
color: #da212f!important;
text-shadow: 2px 2px 2px #DDD;
}
.navbar-default .navbar-nav>.active>a:active {
background-color: #da212f;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Mr. Robot</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Hardware</li>
<li>Robots</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>