CODEWITHSUNDEEP
twitter-bootstrap
Denys Medynskyi
Denys Medynskyi

Reputation: 2353

Change hover color on nav-tabs

I want to change text color of hover nav-tabs, so I named : nav nav-tabs custom, so code in my view looks like this:

      <li class="active"><%= link_to "Overview", '#'  %>           
      </li>
      <li><%= link_to "About",    '#' %></li>
      <li><%= link_to "What we do", '#' %></li>
      <li><%= link_to "Partners", '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><%= link_to "Support", '#' %></li>
    </ul>

and code in my custom.css.scss

.custom a:hover {color: black;}

and it doesn't work. Can someone help me ?

Upvotes: 16

Views: 64167

Answers (4)

Chuck Robertson
Chuck Robertson

Reputation: 155

This works for me without much "specificity" other than the default Bootstrap...

ul.nav > li > a:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-style: none;
}

Upvotes: 2

99miles
99miles

Reputation: 11212

Set @navbarLinkBackgroundHover

Upvotes: 1

Judd Lyon
Judd Lyon

Reputation: 538

Andres is right about the specificity. The style you want to override is set with:

.nav-bar > li > a:hover

If you're using LESS with Twitter Bootstrap there are variables already made for this:

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

See the Navbar section of the docs.

Upvotes: 3

Andres I Perez
Andres I Perez

Reputation: 75379

You need to make your selector a little bit more specific to properly target your tabs. Try this:

.custom > li > a:hover {
    color: black;
}

By the way, this only changes the color of the text, if you want to change the background color of the tabs upon hover switch that color property to background-color.

Upvotes: 22

Related Questions