navbar.html

<!-- Navbar Begins -->
<nav class="navbar navbar-expand-md fixed-top">
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <img src="static/images/logo.png" style="pointer-events: none" width="45" alt="" style="margin-left: 2%;margin-right: -2%;">
        <a href="index.html" class="navbar-brand ml-5 rwoc" style="font-size: 28px;">
            Robotics Winter Of Code
        </a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item px-2" id="text-1">
                <a href="index.html" class="nav-link active">
                    <i class="fas fa-home" id="icon-1"></i> HOME
                </a>
            </li>
            <li class="nav-item px-2" id="text-2">
                <a href="projects.html" class="nav-link active">
                    <i class="fas fa-wrench" id="icon-2"></i> PROJECTS
                </a>
            </li>
            <li class="nav-item px-2" id="text-3">
                <a href="team.html" class="nav-link active">
                    <i class="fas fa-users" id="icon-3"></i> OUR TEAM
                </a>
            </li>
            <li class="nav-item px-2" id="text-4">
                <a href="contact_us.html" class="nav-link active">

                    <i class="fas fa-envelope" id="icon-4"></i> CONTACT US
                </a>
            </li>
        </ul>
    </div>
</nav>
<!-- Navar Ends -->

<script>
    document.getElementById("text-1").addEventListener("mouseenter", change11);

    function change11() {
        document.getElementById("icon-1").style.color = "#002E63";
    }
    document.getElementById("text-1").addEventListener("mouseleave", change12);

    function change12() {
        document.getElementById("icon-1").style.color = "white";
    }
    document.getElementById("text-2").addEventListener("mouseenter", change21);

    function change21() {
        document.getElementById("icon-2").style.color = "#002E63";
    }
    document.getElementById("text-2").addEventListener("mouseleave", change22);

    function change22() {
        document.getElementById("icon-2").style.color = "white";
    }
    document.getElementById("text-3").addEventListener("mouseenter", change31);

    function change31() {
        document.getElementById("icon-3").style.color = "#002E63";
    }
    document.getElementById("text-3").addEventListener("mouseleave", change32);

    function change32() {
        document.getElementById("icon-3").style.color = "white";
    }
    document.getElementById("text-4").addEventListener("mouseenter", change41);

    function change41() {
        document.getElementById("icon-4").style.color = "#002E63";
    }
    document.getElementById("text-4").addEventListener("mouseleave", change42);

    function change42() {
        document.getElementById("icon-4").style.color = "white";
    }
</script>