I've been trying to customize the font color of a navigation link using ui-router's ui-sref functionality, but I'm facing an issue. While I can change the background color by adding it to the .active class in my CSS, the font color remains unchanged. Can anyone help me identify what's wrong with my code? My objective is to have the font color change when the route is active.
<nav>
<ul>
<li ui-sref-active="active" ng-class="{active: activeListItem == 'home'}"> <a ui-sref="Home "><img src="images/icon-information.png"> Introduction </a> </li>
<li ui-sref-active="active" ng-class="{active: activeListItem == 'testInfo'}"> <a ui-sref ="TestInfo"> <img src="images/icon-settings.png"> SmartCart Setup</a></li>
<li ui-sref-active="active" ng-class="{active: activeListItem =='errorScenarios'}" > <a ui-sref="ErrorScenarios"><img src="images/icon-error.png"> Error Scenarios </a> </li>
<li ui-sref-active="active" ng-class="{active: activeListItem == 'contactUs'}" > <a ui-sref="ContactUs"><img src="images/icon-contact.png"> Contact </a> </li>
</ul>
</nav>
The relevant excerpt from my CSS file is as follows:
body {
font-family: 'Encode Sans', sans-serif;
font-weight: 400;
margin-top: 0px;
}
...
.active
{
color:red;
}