There are two ways that you can change the font color of the active nav-item. The default font-color is white of the active nav-link in the case of Bootstrap nav-active item. The first-way approach is to use a CSS styling file and changing the nav-item class when clicked.
The second-way approach is to change the color using jQuery .css() property and also changing the class status to active for a nav-item using jQuery.
Approach 1: Providing an Overriding CSS Styling: To change the color of the font an overriding styling file can be added to the HTML file. This style file will be used to change the font-color of the selected nav-item. When a nav-item is selected, this style file will be added to that particular nav-item.
Here you can observer the color of the active link is changed to red.
Home link is clicked and its font-color changed to red
GeeksForGeeks nav item is clicked
Approach 2: To change font-color of active-nav using jQuery: To change the font-color of the active-nav link using jQuery, we need to add the active class to that particular nav-item and then we just need to apply the .css(property,value) to change the font- color of the active nav-item.
Please Login to comment...