How to change font color in dropdown navbar when collapsed in bootstrap ?

Last Updated : 05 Nov, 2020

Bootstrap 4 is one of the most widely used CSS frameworks along with HTML and JavaScript to build interactive websites. Bootstrap 4 offers a great variety of inbuilt components, classes, and utility methods that can be used to create a user-friendly web application. The following article accomplishes the purpose of changing the color of a dropdown of the bootstrap navbar when collapsed.

First Approach: The first approach makes use of Bootstrap classes to change the color of the dropdown of the navbar when collapsed. Bootstrap 4 has an inbuilt class '.show' which is added to the navbar item when the dropdown menu expanded and the class is hidden when the dropdown menu when it is collapsed. The color of the dropdown can be changed using the show class.

Code Implementation:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous">
    </script>

    <style type="text/css">
        .nav-item.dropdown.show a {
            color: blue !important;
        }

        #navbarDropdown {
            color: pink;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light">
        
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" 
            data-toggle="collapse" 
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
            
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" 
            id="navbarSupportedContent">
            
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                        href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" 
                        aria-labelledby="navbarDropdown">
                        
                        <a class="dropdown-item" href="#">
                            Action
                        </a>
                        
                        <a class="dropdown-item" href="#">
                            Another action
                        </a>
                        
                        <div class="dropdown-divider"></div>
                        
                        <a class="dropdown-item" href="#">
                            Something else here
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>

Output:

Before Clicking the Dropdown Menu:
After Clicking the Dropdown Menu:

Second Approach: The second approach makes use of jQuery with Bootstrap class to change the color of the dropdown menu of the navbar when collapsed. When the dropdown menu is clicked the navcolor class is added and the color of the dropdown menu changes. When the dropdown menu is collapsed or clicked again the navcolor class is hidden. The class navcolor is toggled each time the dropdown is clicked. In this approach, we do not make use of any inbuilt Bootstrap class.

Code Implementation:

HTML

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous">
    </script>

    <style type="text/css">
        .navcolor {
            color: red !important;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light">
        
        <a class="navbar-brand" href="#">
            Navbar
        </a>

        <button class="navbar-toggler" 
            type="button" data-toggle="collapse" 
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
            
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" 
            id="navbarSupportedContent">
            
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"
                        href="#" id="navbarDropdown"
                        role="button"
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="false">
                        Dropdown
                    </a>

                    <div class="dropdown-menu" 
                        aria-labelledby="navbarDropdown">
                        
                        <a class="dropdown-item" 
                            href="#">Action</a>

                        <a class="dropdown-item" 
                            href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            Something else here
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <script type="text/javascript">
        $("#navbarDropdown").click(function () {
            $("#navbarDropdown").toggleClass("navcolor");
        });
    </script>
</body>

</html>