Bootstrap: changing dropdown menu's active link color

Question

I am trying to change the color and background color of the active link in a boostrap's dropdown menu.

I have overriden bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables but this has no effet.

The css for ".navbar-inverse .nav .active > a" takes over, as seen in firebug:

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { background-color: #FFFFFF; color: #4D4D4F; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #16A170; background-image: linear-gradient(to bottom, #17AA76, #149466); background-repeat: repeat-x; color: #FFFFFF; outline: 0 none; text-decoration: none; }

Why is the .navbar-inverse class overriding the .dropdown-menu class ?

ImThatPedoBear · Accepted Answer · 2013-06-26 14:44:26Z

Probably cause the dropdown is in the navbar.

This one should work

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #16A170 !important; background-image: linear-gradient(to bottom, #17AA76, #149466) !important; background-repeat: repeat-x !important; color: #FFFFFF; outline: 0 none; text-decoration: none; }

Massimo Ivaldi · Accepted Answer · 2014-01-19 19:47:20Z

assume the backgroud-color you need is #fff write this:

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { text-decoration: none; color: #333333; background-color: #fff; background-image: -moz-linear-gradient(top, #fff, #fff); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff)); background-image: -webkit-linear-gradient(top, #fff, #fff); background-image: -o-linear-gradient(top, #fff, #fff); background-image: linear-gradient(to bottom, #fff, #fff); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0); }

Collectives™ on Stack Overflow

Bootstrap: changing dropdown menu's active link color

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related