CODEWITHSUNDEEP
twitter-bootstrapnavbar
Campbell King
Campbell King

Reputation: 131

Can't remove border color from active list item in bootstrap

I am having trouble removing the border from my active list item in the navbar. See the attached photo. This is appearing only when I click the list item to reveal the dropdown then click it again which closes the dropdown. Then when i move the cursor off the list item it shows this blue border.

Any help would be appreciated. Note am using Less.

enter image description here

<div class="nav-collapse pull-right">
        <ul class="nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
              <li><a href="#">PLANS</a></li>
              <li><a href="#">PLANS</a></li>
              <li><a href="#">PLANS</a></li>
            </ul>
          </li></ul>

Upvotes: 1

Views: 2198

Answers (2)

Sailias
Sailias

Reputation: 84

Using the same markup above with the following style will remove the blue border from the link.

.dropdown a { outline: none; }

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

I believe the LI elememt that has the class 'dropdown' on it get the class 'open' added to it when you activate the dropdown. Try using that 'open' class to turn the border off.

Upvotes: 2

Related Questions