How to prevent Boostrap static-header's icon from being highlighted - html

Question

I have a static HTML header that contains icons.
One icon uses Bootrap's navbar dropdown component.
My problem is, when I click on the user icon and select one of the dropdown menus, the user icon is also highlighted (replicates in the attached scriptlet when you click on "D" and move your cursor down a little).
How do I prevent the icon "D" from being highlighted after moving the cursor down a little?
<style> li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #ffffff;
opacity: 1;
}
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.navbar.navbar-ct-green {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.table {
margin-bottom: 60px;
}
</style>
<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<i class="pe-7s-timer"></i>A
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-note2" style="color: white;"></i>B
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-config" style="color: white;"></i>C
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="pe-7s-user"></i> <span class="caret"></span>D
</a>
<ul class="dropdown-menu" background="blue">
<li>
Logout
</li>
<li>
Profile
</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 1

You can apply an inline style as background:none (or transparent) on last a class="dropdown-toggle"...> which is parent of your D element:
<li class="dropdown">
<a href="#" class="dropdown-toggle" style="background:none !important;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
...
Edit:
another way is to define a css class like as noFocusBkg as following and apply it to containing li item as:
.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
background: none; /* or transparent or inherit */
}
<li class="dropdown noFocusBkg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
...
the full code snippet:
<style>
li.navbar-nav > a:hover,
li.navbar-nav > a:focus {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #ffffff;
opacity: 1;
}
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.navbar.navbar-ct-green {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-green .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-green .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-green .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
.table {
margin-bottom: 60px;
}
.noFocusBkg .dropdown-toggle:focus { /*** new class to prevent highlighting */
background: none; /* or transparent or inherit */
}
</style>
<link href="http://themes-pixeden.com/font-demos/7-stroke/Pe-icon-7-stroke.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
<nav class="navbar navbar-ct-green navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<i class="pe-7s-timer"></i>A
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-note2" style="color: white;"></i>B
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-config" style="color: white;"></i>C
</a>
</li>
<li class="dropdown noFocusBkg">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="pe-7s-user"></i> <span class="caret"></span>D
</a>
<ul class="dropdown-menu" background="blue">
<li>
Logout
</li>
<li>
Profile
</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 2

The highlighting is occurring on the :focus event. So you can prevent this by overriding Bootstrap's default :focus event, like so:
.nav > li > a:focus {
background-color: transparent;
}