CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menunavbar
London Smith
London Smith

Reputation: 1659

Navbar modify border / background color on dropdown-menu item on click

I don't understand why I have a blue border when I click on the Item "My account" of a navbar item which opens a dropdown-menu:

enter image description here

So I tried to put all in red with !important like this but with no success:

nav a.nav-account.active {
   color: red !important;
   background: red !important;
   border: 2px solid red !important;
}

Example: http://jsfiddle.net/5o06orcg/1/

It's like it's not .active I have to edit. How to?

Upvotes: 0

Views: 722

Answers (2)

Igor Ivancha
Igor Ivancha

Reputation: 3451

Because instead nav a.nav-account.active you need to apply styles to .nav .open > a or .nav .open .dropdown-toggle will work: 

.nav .open .dropdown-toggle {
   color: red !important;
   background: red !important;
   border: 2px solid red !important;
}

Jsfiddle-example

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You need to make !important border color for selector nav a.nav-account:

nav a.nav-account {
    color: white !important;
    border-radius: 6px;
    margin-left:10px;
    margin-top:13px;
    line-height:10px !important;
    border: 2px solid white !important;
}

http://jsfiddle.net/a1vv9hvf/

Upvotes: 2

Related Questions