How to create a responsive navbar using HTML and CSS

Hello there, Today’s blog will teach you How To Make a Responsive Nav Bar Using HTML, CSS as you can see in the preview image above.

You may also view the entire video tutorial.

Source Code

To begin, you must create two files: one HTML file and one CSS file. After you’ve created these files, simply copy and paste the following codes into your file.

HTML Code

First, create an HTML file called index.html and paste the following codes into it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css">
    <link
    href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <nav class="nav-bar">
        <input type="checkbox" id="check" class="btn"/>
        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>
        <p class="logo">NavBar</p>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a  href="#">Blog</a></li>
            <li><a  href="#">Services</a></li>
            <li><a  href="#">About</a></li>
            <li><a  href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

CSS Code

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
body{
    font-family: "Heebo";
    background: white;
}
nav{
    background: white;
    height: 100px;
    width: 100%;
    box-shadow: 0px 2px 10px rgb(0 0 0/5%);
}
.logo{
    display: inline-block;
    font-size: 1.5em;
    padding: 0 100px;
    font-weight: bold;
    margin-top: 45px;
}
nav ul{
    float: right;
    margin-right: 100px;
}
nav ul li{
    display: inline-block;
    margin: 45px 5px 0 5px;
}
li:after{
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
li:hover:after{
    width: 100%;
    background: #e55b5b;
}
nav ul li a{
    color: black;
    font-size: 17px;
    padding: 0 13px 7px 13px;
}
a.active{
    color: #e55b5b;
}
.checkbtn{
    font-size: 30px;
    color:#e55b5b;
    float: right;
    margin-top: 30px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
.btn{
    display: none;
}
@media(max-width:952px){
    .logo{
        padding-left: 50px;
    }
    nav ul li a{
        font-size: 16px;
    }
}
@media (max-width:858px){
    .checkbtn{
        display: block;

    }
    ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: white;
        top:80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
        margin-top: 25px;

    }
    nav ul li{
        display: block;
        margin:40px 0;

    }
    nav ul li a{
        font-size: 20px;
    }
    li:hover:after{
        width: 25%;
    }
    a.active{
        background: none;
        color: #e55b5b;
    }
    .btn:checked ~ ul{
        left: 0;
    }
}

Thank you!!

I hope this post will be helpful in saving you time ️✌️and creating a nice animated search bar for your website. If you like, please share with others ❤️️ and let me know the topic you want to code for.

Other posts