When creating a navigation menu with Bootstrap, I decided to change the buttons from the primary class to inverse. I then went on to further customize the inverse class using inline CSS to match my specific look and feel requirements.
.btn-inverse {
background-color: transparent;
color: silver;
}
However, a problem arose when I noticed that the menu title on the element remained barely visible, almost invisible, when hovering or clicking on the dropdown menu.
This was due to the generated HTML code:
<button class="btn btn-inverse active dropdown-toggle" data-toggle="dropdown" type="button">
Menu item
<span class="caret"></span>
</button>
I attempted to solve this issue by using the following CSS:
.btn-inverse :hover {
color: white!important;
}
Unfortunately, this solution did not work. Any suggestions on how to fix this?