CODEWITHSUNDEEP
twitter-bootstraphyperlinknavbar
Felipe Mesquita
Felipe Mesquita

Reputation: 1

How change navbar link outline color on bootstrap

At first, I've just wanted to change the background color of a dropdown menu at the navbar. I wanted that because the default background color is grey and I wanted to make it transparent.

To achieve that, I customized bootstrap.css using the link provided by bootstrap (/bootstrap/customize)

I've changed @navbarLinkBackgroundActive to TRANSPARENT instead of @lightGrey I also changed @navbarLinkColor to @black.

Below there's the before and after the changes:

BEFORE: http://img41.imageshack.us/img41/7027/stackdropdownoriginal.jpg

AFTER: http://img10.imageshack.us/img10/7503/stackdropdownalterado.jpg

As you can see, the background color has changed.

But now, I have another problem. I want to remove the white outline of the link! I played with the different variables on bootstrap customize page but I couldn't achieve it correctly.

Changing @navbarBackgroundHighlight to @black will "remove" this white outline (though it still ugly), but it also mess with the navbar creating a black straight line under it.

Also, is there som way to change these color besides using bootstrap customize page? Is there a way to to overwrite this color properties on my .css?

Upvotes: 0

Views: 902

Answers (1)

Ryan
Ryan

Reputation: 15270

That "white outline" is really a white text-shadow. Just set it to none.

.dropdown-menu li {
    text-shadow:none;
}

Upvotes: 1

Related Questions