Bootstrap 3 navbar anchor element is not styled properly on the active/focus state

I’m using bootstrap as my front end framework for UI, and at the moment, I’m trying to customize the CSS. Everything works fine except one small detail:

enter image description here

Not sure why this is happening. I think this is the :active property of said link, however, it doesn’t get fixed when I tried to apply the :active css rule. Here’s the html and css:

<nav class="navbar navbar-SwitchHon navbar-fixed-top">
  <div class="container-fluid">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#SwitchHon-main-navbar">
              <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="#"><img src="img/brand-switchhon.png"></a>
      </div>
      <div class="collapse navbar-collapse" id="SwitchHon-main-navbar">
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><i class="fa fa-users"></i> Inicio</a></li>
              <li><a href="#"><i class="fa fa-newspaper-o"></i> Productos y Servicios</a></li>
              <li><a data-toggle="modal" data-target="#modalContact"><i class="fa fa-envelope-o"></i> Contactanos</a></li>
              <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li>
          </ul>
      </div>
  </div>
</nav>

and the css:

.navbar-SwitchHon{
  background-color: #34495e;
  border-radius: 0px;
  font-size: 1.1em;
  border-bottom: 0px;
}
.navbar-brand img{
  height: 40px;
  width: auto;
  margin-top: -11px;
}
.nav li{
  text-align: center;
}
.nav li a{
  color: #fff;
  transition: all 0.5s ease;
}
.navbar-header a{
  transition: all 0.5s ease;
}
.nav li a:hover, .navbar-header a:hover, .nav li a:active, .navbar-header a:active{
  transition: all 0.5s ease;
  background-color: rgba(44, 62, 80,0.4);
}
.navbar-header a:hover{
  opacity: 0.9;
  transition: all 0.5s ease;
}
.navbar-brand a{
  transition: all 0.5s ease;
}

I’m sure it must be a simple fix, however I can’t seem to find it. Any help would be much appreciated! I would like it to remain the same way as it is when you hover over it.


solution

That background color is actually appearing on the :focus state.

Here are the relevant selectors in the default Bootstrap stylesheet:

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

Therefore you could just overwrite it with a different background-color:

Example Here

.navbar .nav > li > a:focus {
  background-color: rgba(44, 62, 80, 0.4);
}

..or make it transparent:

.navbar .nav > li > a:focus {
  background-color: transparent;
}