CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CodeTrooper
CodeTrooper

Reputation: 1888

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.

Upvotes: 3

Views: 714

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

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;
}

Upvotes: 5

Related Questions