ui-router: Issue with ui-sref causing font color to remain unchanged

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;
}

Answer №1

Seems like there may be an issue with your CSS code. I have made a copy of your plunker where the issue has been resolved.

Check out the updated version here

 li:hover,li:focus, li.active {
     background:blue;
  } 

Please remember that it should be li.active . The "active" is a class within the "li" tag and not a property like hover or focus. Therefore, it should be "." instead of ":".

Answer №2

Here is how I structured my menu:

<ul class="sidebar-nav">
    <h5 class="sideNav-title">Main Menu</h5>
    <li class="customNav active" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="dashboard"><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard</a></li>
    <li class="customNav" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="userManagement"><i class="fa fa-users" aria-hidden="true"></i> User-Management</a></li>
    <li class="customNav" ><a data-toggle="collapse" data-parent="#accordion" data-target="#collapseAttendance" aria-expanded="true" aria-controls="collapseAttendance"><i class="fa fa-id-card-o" aria-hidden="true"></i> Attendance <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>

I have included some CSS to style the navigation links for better user experience.

li.customNav > a:hover,li.active.customNav > a,li.current.customNav > a {
background-color: @main_color !important;
color: #ffffff !important;
border-left: 2.5px solid @primary_color;
box-shadow: 0 2px 3px rgba(0,0,0,0.20), 0 5px 5px rgba(0,0,0,0.22);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);

Feel free to customize this code as needed for your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

Difficulty encountered in resetting progress bar post ajax form submission

Hello, I hope you can assist me with an issue I am facing regarding my progress bar. After submitting the form using AJAX to insert data, my progress bar does not reset. I would like it to reset after clicking the submit button. The progress bar is speci ...

Ensure the bottom div is anchored with a top margin

I am attempting to design a contact/information section at the bottom of my webpage, similar to the grey area at the bottom of this site. Here is my HTML code: *{margin:0; padding:0; box-sizing: border-box;} body{ padding-bottom: 0; } body .main{ marg ...

Tips for shifting a div to the left with AngularJS

I am working with a div structure that looks like the following: <div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div> <div class="customer-ust-bant col-xs-22" id="letters"> <box n ...

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

Utilizing React in conjunction with i18next and incorporating the HTML attribute lang

My website is built using React and i18next, with support for multiple languages. I am trying to change the 'lang' attribute in my HTML page. How can I achieve this? Even though I am using the i18next-browser-languagedetector, the lang attribut ...

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

Is there any code for displaying the action form?

I'm brand new to PHP and just tried a simple form processing program I found in a book: <!doctype html> <head> <meta charset="utf-8"> <title>Bob's Parts Store</title> </head> <body> <form action = ...

What could be causing my page div to continuously expand on ios devices only?

I'm facing a strange issue where the div element in my document keeps growing endlessly. This problem has been observed on iPhone with iOS 5.1 and 6. It's fascinating to watch the height and min-height values of the page increase continuously, ca ...

Increasing the maximum width of an image in CSS is necessary to see the max-height take effect

Within my HTML structure: <Col md="6"> <div className="hero-section"> <div className={`flipper ${isFlipping ? "isFlipping" : ""}`}> <div className="front"> <div className="hero-section-content"> ...

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

Storing dropdown selection as a variable in a PHP Ajax form

I have created a PHP form that allows the user to select an option from a dropdown menu in order to view a specific data set. The data is refreshed on the screen using an AJAX call and I am utilizing the 'html' datatype to update the output withi ...

Is there a way to set the menu to automatically open when the page loads?

Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...

Prevent selection of weekends and dates in the past using AngularJS

I have been trying to insert a date picker text box using the code below: <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script> function MainController($scope) { $scope.date = ne ...

A guide on updating a boolean field in the database using ajax

Here is a piece of my html code: <form action="" method="post"> {% csrf_token %} {% if donate.is_taken == False %} <br> <button type="submit" class="btn" name="taken_or_not" ...

Is there a way to create a dynamic CSS for a custom JSF component through code generation?

I am currently developing a custom JSF component that displays content in multiple columns in a "responsive" manner. This component utilizes the "CSS Multi-column Layout Module" (http://www.w3.org/TR/css3-multicol/) (tutorial available in French: ). Belo ...

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

Trouble arises when trying to override base theme values in Mui 5 with styled components

Having trouble with Mui5 and SC when trying to override base theme values. The base theme for Mui components looks like this: const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { borderRadius: "1. ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

How can I utilize the Facebook API on Tizen to share a video?

Could someone please provide guidance on how to incorporate video uploading functionality into a Tizen application using the Facebook API and HTML5? ...