Responsive Navbar using HTML and CSS

Hey developer we created a Responsive Navbar using HTML and CSS for you. In this project, we use an input element to add the toggle functionality to the Navbar. 

And you can get all the source code of this Navbar absolutely free. Check this post copy the code add run in your code editor.

Preview

Responsive navbar template HTML CSS

HTML Code

<!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">
    <title>Responsive Navbar</title>
    <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">
</head>

<body>
    <nav class="navbar">
        <div class="left">
            <h1>Navbar</h1>
        </div>
        <div class="right">
            <input type="checkbox" id="check">
            <label for="check" class="checkBtn">
                <i class="fa fa-bars"></i>
            </label>
            <ul class="list">
                <li><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>



CSS Code

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
}

.navbar {
    background-color: rgb(22, 7, 36);
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 5rem;
}

.left h1 {
    font-size: 2.5rem;
    cursor: pointer;
}

.checkBtn {
    display: none;
}

#check {
    display: none;
}

.checkBtn {
    cursor: pointer;
    font-size: 30px;
    float: right;
    color: #ed1e79;
    line-height: 80px;
}

.right ul {
    display: flex;
    list-style: none;
}

.right ul li a {
    padding: 10px 20px;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: all 1s;
}

.right ul li a:hover {
    background-color: #fff;
    border-radius: 7px;
    color: rgb(22, 7, 36);
}

@media screen and (max-width:805px) {
    .list {
        width: 100%;
        height: 100vh;
        background-color: rgb(22, 7, 36);
        text-align: center;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 4rem;
        left: 100%;
        transition: all 1s;
    }

    #check {
        display: none;
    }

    .checkBtn {
        display: block;
    }

    #check:checked~ul {
        left: 0%;
    }

}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

19 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. Thank you so much

    ReplyDelete
  2. left right sliding but how to top slide?

    ReplyDelete
  3. awesome bro😍😍😍😍

    ReplyDelete
  4. How do you get the drop down list for the break after 805px? Shouldnt Javascript be used for that function?

    ReplyDelete
  5. This is use for my collage project and iam modify some changes

    ReplyDelete
  6. where is java

    ReplyDelete
    Replies
    1. This project is responsive without JavaScript

      Delete
  7. please provide the real view of the project instead of just image so that we can inspect and make on our own

    ReplyDelete
    Replies
    1. Please try the same code on your Computer or laptop and run index.html. You will the output of the project is same as it is looking in this post

      Delete
  8. hi i wrote like your codes in my computer but it doesnt work ...would you please help me

    ReplyDelete
  9. Media core is used here are not

    ReplyDelete

Top Post Ad

Below Post Ad