Simple Responsive Navigation Bar with HTML, CSS and JavaScript

Responsive Navigation Bar with HTML, CSS and JS

Responsive Website design is the most important part of the modern website. Today we are going to learn how to make Responsive website with the help of HTML, CSS and simple JavaScript.

Folder Structure

Starting with the folder structure we need One main folder having three subfolder as below

  1. html.css
  2. style.css
  3. script.css

HTML

In the html, we define main-header div which wraps all the content of responsive navigation bar. Inside main-header there are two div(header and nav). Further more header contains two div inside it , logo and burger. Burger is displayed only when screen size is small as shown in the tutorial video above. Links in the nav div are adjusted with the change in the screen size.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation bar by AbidAdhikari CS</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="main-header">
        <div class="header">
            <div class="logo">
                AbidAdhikari CS
            </div>
            <div class="burger">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
            </div>
        </div>
        <nav class="nav">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
                <li>
                    <a href="#">Privacy</a>
                </li>
            </ul>
        </nav>

    </div>
    <div class="container">
        <h3>SUBSCRIBE TO AbidAdhikari CS</h3>
    </div>
    <script src="./script.js"></script>
</body>

</html>

CSS

In CSS, we import Poppins font from the google font as it is widely used font and very attractive. Here we have added color: white in the body which so that all our text will be in white . so we have to change it manually while making rest of the website.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&display=swap');
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
   color: white;
}
a{
    color: white;
    text-transform:uppercase;
    text-decoration:none;
}
.main-header{
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: turquoise;
}
.header{
    height:10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.logo{
    font-size: x-large;
}
.burger{
    cursor: pointer;
    display: none;
}
.burger .line{
    height: 3px;
    width: 30px;
    margin: 5px;
    transition: transform 0.3s ease;
    background-color: white;
}
nav{
    width: 40%;
}
nav ul{
    display: flex;
    list-style-type: none;
    justify-content: space-around;
}

@media screen and (max-width:768px){
    nav{
        display: none;
    }
    .header{
        height: 10vh;
        width: 100%;
    }
    .burger{
        display: block;
    }
    .main-header{
        display: flex;
        flex-direction: column;
    }
}
.nav-active{
    display: block;
    border-top:2px solid orangered;
    width: 100%;
    height: 50vh;
}
.nav-active ul{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}



.container{
    width: 100%;
    margin-top: 1rem;
    color: grey;
    display: flex;
    justify-content: space-around;
}

JavaScript

In JavaScript, We have just selected classes of the HTML , added event listener and toggled classes with visibility state and responsiveness from the CSS . We have also added simple cross animation to burger menu.

const navReveal=()=>{
    const burger=document.querySelector('.burger');
    const nav=document.querySelector(".nav");
    burger.addEventListener('click',()=>{
        nav.classList.toggle('nav-active');

        // Burger Animation 
        burger.classList.toggle('toggle');
    })
}
navReveal();

Add a Comment

Your email address will not be published. Required fields are marked *