Responsive Navbar using HTML and CSS

Hey developer we are going to Create a Responsive Navbar using HTML and CSS Only. This is Day 59 from of our 90Days 90Projects Series. 

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given css code in your code's css file.

Preview


HTML Code

index.html

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

<body>
    <nav class="navbar">
        <input type="checkbox" id="hamburger">
        <div>
            <div class="nav-title">
                <h2> Geeks Help </h2>
            </div>
        </div>
       
        <div class="hamburgerMenu">
            <label for="hamburger">
                <div></div>
                <div></div>
                <div></div>
            </label>
        </div>

        <div class="links">
            <a href="/" target="_blank"> Home </a>
            <a href="/service" target="_blank"> Service </a>
            <a href="/about" target="_blank"> About Us</a>
            <a href="/contact" target="_blank"> Contact Us</a>
            <a href="tel:+1234567890" id="call" target="_blank"> Call Us </a>
        </div>
    </nav>

</body>
</html>


CSS Code

style.css

* {
    margin: 0px;
    box-sizing: border-box;
    font-family: 'segoe ui';
}

.navbar {
    width: 100%;
    padding-left: 20px;
    height: 50px;
    display: flex;
    position: relative;
    align-items: center;
    background-color: #e65b00;
    justify-content: space-around;
}

.nav-title h2 {
    color: #fff;
    font-size: 1.5rem;
}

.hamburgerMenu {
    display: none;
}

.links {
    font-size: 18px;
}

.links a {
    color: #fff;
    text-decoration: none;
    padding: 13px 10px 13px 10px;
}

.links a:hover {
    background-color: #be5915;
}

#hamburger {
    display: none;
}

@media (max-width:600px) {
    .navbar {
        justify-content: space-between;
    }

    .hamburgerMenu {
        display: block;
        margin-right: 20px;
    }

    .hamburgerMenu label {
        display: inline-block;
        cursor: pointer;
        padding: 13px;
        height: 50px;
        width: 50px;
    }

    .hamburgerMenu label:hover,
    .navbar #hamburger:checked~.hamburgerMenu>label {
        background-color: #be5915;
    }

    .hamburgerMenu label div {
        border-top: 2px solid #fff;
        display: block;
        height: 10px;
        width: 25px;
    }

    .links {
        border-top: 1px solid #e6a77d;
        background-color: #e65b00;
        transition: all 0.3s;
        overflow-y: hidden;
        position: absolute;
        display: block;
        width: 100%;
        height: 0px;
        top: 50px;
        left: 0px;
    }

    .links a {
        display: block;
        width: 100%;
    }

    #hamburger:not(:checked)~.links {
        height: 0px;
    }

    #hamburger:checked~.links {
        height: calc(100vh - 50px);
    }
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad