Bootstrap 3 Active Menu State Colour - html

Question

This may be simple, however I can't seem to accomplish what I need.
Basically, I want the colour to change to something else rather than bootstrap's default blue when the page in question is in active.
I have tried many different css, but this is my current:
ul.nav a:active {
background-color: #3366CC !important;
}
The navbar that im using is as followed:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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 nav-pills nav-justified fixed-top">
<li class="active">Home</li>
etc
Is there a simple CSS rule that I'm missing, the colours change quite freely for my other menu needs, such as:
ul.nav {
padding: 5px;
}
ul.nav li a {
color: #fff;
}
ul.nav li a:hover{
color: #CC0033 !important;
}
ul.nav a:hover {
background-color: #fff !important;
}
Any help will be appreciated!

Answer 1

You just need to add the color to the a tag inside the li with the active class
ul.nav li.active a {
background-color: #3366CC !important;
}

Answer 2

The :active pseudo-class only matches when, for example, the user is in the process of clicking on the link:
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
It does not indicate which page is active.
In Bootstrap the page/section that is currently active is signaled by an active class on the li. In Bootstrap 3, try:
.nav > .active {
background-color: #3366CC;
}
Use Inspect Element to find out what style is actually being applied, so you can properly override it.