Here is the HTML code snippet that I am currently working with:
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar" data-ng-controller="NavbarController">
<li class="nav-item" data-ng-class="{'active':getClass('/a')}" data-ng-show="user.admin"><a href="#/a">a</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/b')}" data-ng-show="user.admin"><a href="#/b" >b</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/c')}" data-ng-show="user.admin"><a href="#/c" >c</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/d')}" data-ng-show="user.admin"><a href="#/d" >d</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/e')}" data-ng-show="user.admin"><a href="#/e" >e</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/f')}" data-ng-show="user.admin"><a href="#/f">f</a></li>
<li class="nav-item" data-ng-class="{'active':getClass('/g')}" data-ng-show="user.admin"><a href="#/g">g</a></li>
<li class="nav-item" data-ng-click="action()" data-ng-show="user.admin"><a href="#/h">h</a></li>
</ul>
</div>
....
I have been attempting to customize the hover and active color of the navbar elements, but unfortunately, I haven't been successful so far.
After researching, it seems like I should be focusing on using :hover and :active in my CSS, but I am struggling to implement these selectors effectively to change the colors as desired.
Any tips or guidance on how I can achieve a custom hover and active color for each navbar element?