I am trying to customize a bootstrap navbar with individual elements as nav-pills. After recompiling bootstrap to change the default colors, I want to add a background color to the pills that is different from the hover and active states. How can I achieve this? Should I modify the app-wide CSS file for it, or is there a way to accomplish this using Bootstrap's less?
This section shows a snippet of my current navbar:
<nav class="navbar">
<div class="container">
<div class="collapse navbar-collapse elements">
<ul class="nav nav-pills navbar-right">
<li ng-class="setClass('/')"><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
<li ng-class="setClass('/list')"><a href="/list">Browse</a></li>
<li ng-class="setClass('/search')"><a href="/search">Search</a></li>
</ul>
</div>
</div>
</nav>
https://i.sstatic.net/vkJFB.png
It is noticeable how the hovered element receives highlighting, the active one stands out, whereas the inactive ones blend into the background.