Responsive Navigation Bar using HTML, CSS, and JS || Coding Power




Hello everyone, you can learn how to create a Responsive Navigation Bar using HTML, CSS, and JS in this blog. So if you want to learn then follow all the steps carefully.  

Watch Full Tutorial on YouTube


Source Code Of Responsive Navigation Bar

Step 1: Create Index.html File

Create one file with the name index.html and paste the below code in this file. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Responsive Navbar</title>
</head>
<body>
    <div class="toggle" onclick="menutoggle()"><i class="fa fa-bars"></i></div>
    <nav class="navbar">
        <div class="links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <script>
        let icon = document.querySelector(".fa-bars");
        let navbar = document.querySelector(".navbar");

        function menutoggle(){
            
            if(navbar.classList.contains("active")){
                navbar.classList.remove("active");
                icon.classList.replace("fa-times", "fa-bars");
            }
            else{
                navbar.classList.add("active");
                icon.classList.replace( "fa-bars" ,"fa-times");
            }
        };

    </script>

</body>
</html>


Step 2: Create style.css File

Create one file with the name style.css and paste the below code in this file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.toggle{
    width: 100%;
    display: none;
}

.toggle i{
    width: 100%;
    text-align: right;
    padding: 10px;
    font-size: 25px;
    background:  #1b5c70;
    color: white;
}

.navbar{
    width: 100%;
    background:  #1b5c70;
}

.navbar .links ul li{
    display: inline-block;
    padding: 15px 20px;
}

.navbar .links ul li:hover{
    background: #ff9f1c;
    cursor: pointer;
}

.navbar .links ul li a{
    text-decoration: none;
    font-size: 18px;
    color: white;
}

@media (max-width:768px){
    .toggle{
        display: block;
    }

    .navbar{
        background: #2aaad1;
        display: none;
    }

    .navbar .links ul li{
        display: block;
        text-align: center;
    }

    .active{
        display: block;
    }
}


That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.

For Download Code You have to wait 30 seconds.


Post a Comment

Previous Post Next Post