Related Articles

Related Articles

How to change font color of the active nav-item in Bootstrap ?
  • Difficulty Level : Medium
  • Last Updated : 05 Nov, 2020

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.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1
                       shrink-to-fit=no" />
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
              crossorigin="anonymous" />
        <script src=
      </script>
        <script src=
      </script>
  
        <title>Active Link using css style</title>
        <style>
            /*Code to change color of active link*/
            .navbar-nav > .active > a {
                color: red;
            }
        </style>
    </head>
  
    <body>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    GeeksForGeeks
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    Others
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" 
                   href="#">Disabled</a>
            </li>
        </ul>
  
      <script>
          $(document).ready(function () {
              $("ul.navbar-nav > li").click(function (e) {
               $("ul.navbar-nav > li").removeClass("active");
               $(this).addClass("active");
                });
            });
        </script>
    </body>
</html>

chevron_right


Output:



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. 

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1
                       shrink-to-fit=no" />
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
              crossorigin="anonymous" />
        <script src=
      </script>
        <script src=
      </script>
  
        <title>Active Link font color using jqury</title>
    </head>
  
    <body>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    GeeksForGeeks
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    Others
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" 
                   href="#">Disabled</a>
            </li>
        </ul>
  
        <script type="text/javascript">
            $(document).ready(function () {
                $("ul.navbar-nav > li > a").click(
                  function (e) {
                    $("ul.navbar-nav > li").removeClass(
                      "active");
                    $("ul.navbar-nav > li > a").css(
                      "color", "");
  
                    $(this).addClass("active");
                    $(this).css("color", "red");
                });
            });
        </script>
    </body>
</html>

chevron_right


Output:

The active link color changed to red.

Home link is clicked and its font-color changed  to red. Here color is changed using jquery.

GeeksForGeeks nav item is clicked

Note: The Output of both method will be same. When a particular nav-item is clicked it will change the font-color.




My Personal Notes arrow_drop_up
Recommended Articles
Page :