Bootstrap drop down menu showing blue box after clicking

Question

I'm using Bootstrap to build a drop-down menu for one of my tabs in the navbar. I'm trying to customize it; however, there is always this blue box that hovers the tab after I click the tab.

It doesn't happen if I don't click the tab at all, but it happens after clicking it once and hovering my mouse over the same tab. The same thing happens in the submenu.

I've tried different ways to override the CSS, but it's not working. Here's my code for the navbar. How do I override this?

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color">
                        <i class="icon-user"></i>connect
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">LinkedIn</a></li>
                        <li class="divider"></li>
                        <li><a href="#">contact</a></li>                                        
                    </ul>
                </li>
                <li class="divider-vertical"></li>
            </ul>
            </div>
        </div>
    </nav>  

Here's my relevant CSS work for this section.

 @media (max-width: 767px) {

  .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background-color: #009999;
    display: none;
    border: none;
    /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;*/
    color: #555555;
    text-decoration: none;
  }
} 
  @media (max-width: 767px) {
   .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
      background-color: #009999;
  }


}
  @media (max-width: 480px) {

 .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999;
  }

}


.dropdown-menu a:hover,.dropdown-menu a:focus{
  filter:none !important;
  -webkit-transition:background 1s ease;
  -moz-transition:background 1s ease;
  -o-transition:background 1s ease;
  transition:background 1s ease;
}

.dropdown-menu::after, .dropdown-menu::before{
   border:none !important;
}

@media (max-width: 979px) {


    .navbar .nav > li > .dropdown-menu:after {
        border: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: white;
        font-weight: normal;
        padding: 10px 10px 11px;
    }


    .dropdown-toggle > a:visited {
        border: none;
    display: none;
    box-shadow: none;

    } 

  .dropdown-toggle > a:active {
    border: none;
    display: none;
    box-shadow: none;

  } 

    .navbar .nav > li > a:hover {
        display: none;
    }

    .navbar .nav > li > a {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    }


}

Byyourleave

Can you post your relavent CSS? or JSFiddle – Flinch

will you able to provide a live implementation of error ?? – Foretooth

I'm not too sure how I can provide a live implementation of my actual code, but here's a link to bootstrap examples(getbootstrap.com/2.3.2/javascript.html#dropdowns) – Byyourleave

Oops, if you look at the first example and click on the drop down menu and move your mouse away, you'll see a blue-ish box that surrounds the tab that you clicked. I think it's a default thing and I'm trying to get rid of it. – Byyourleave

please use jsfiffle to create a live version of the code – Pappas

None of the below answers worked for me – Racket

Answer 1

The CSS outline: none; will work, and hide the blue box on focus,

but be aware that this is a default browser behavior in Chrome, FF and Safari and will make it hard for partially sighted people to navigate your site.

You should only add it only to non-navigable elements on your page.

Wise

Answer 2

Don't change bootstrap.css. Create another CSS file where you can override this.

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a

Set background-image to none, and background-color to whatever color you want. And if still not working then use !important.

After

Answer 3

add !important to you css that you want to override . Ex:

.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999 !important;
  }

Brannon

I have tried that, but it doesn't solve the problem. Thanks for the suggestion though! – Byyourleave

Answer 4

Try this

.dropdown a {
background-color:#fff transparent !important; }

That's can make reset dropdown class from bootstrap

Shawntashawwal

Answer 5

Try to add this css to your a elements:

a,
a:link,
a:hover,
a:visited,
a:active,
a:focus
  background-color: transparent;

This works for bootstrap's dropdown menu fine and should work in your case too. Also add an !important property if it's necessary.

Notice that you have 4 same ids, this looks a little tricky.

Latoria

Answer 6

For bootstrap 4 you can simply remove the btn css class from the a element. Then the whole thing will behave like a regular link. The hover effect of the link can also be annoying, that's why I added this here to my css files:

.dropdown-toggle:hover {
  color: black;
  text-decoration: none;
}

That shuts off the hover effect for the link element.

Shepard

Answer 7

I searched the bootstrap.css for the blue color #007bff and found the style when an item is active or clicked is:

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

You can override it, for example, like this:

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: red;
}

!important does not seem required.

Hungnam