Responsive Navbar with HTML CSS without Bootstrap

Here you can responsive navbar navigation menu with HTML and CSS without Bootstrap, jQuery, or any other frontend framework. If anybody wants to edit this snippet so you can do yourself and use it in your project by just copying and pasting the free source code.

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To create Responsive Navbar with HTML CSS without Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
</head>
<body>
    <header>
        <div class="brand-logo">
            <a href="#"><img src="https://www.markuptag.com/images/white-logo-icon.png" alt="Brand Logo"></a>
        </div>

        <input type="checkbox" id="toggle-btn">
        <label for="toggle-btn" class="show-menu-btn"><i class="fas fa-bars"></i></label>

        <nav>
            <ul class="navigation">
                <li><a href="#"><i class="fas fa-house-damage"></i> Home</a></li>
                <li><a href="#"><i class="far fa-image"></i> Gallery</a></li>
                <li><a href="#"><i class="fab fa-blogger-b"></i> Blog</a></li>
                <li><a href="#"><i class="fas fa-question"></i> Support</a></li>
                <li><a href="#"><i class="fas fa-phone-alt"></i> Contact Us</a></li>
                <label for="toggle-btn" class="hide-menu-btn"><i class="fas fa-times"></i></label>
            </ul>
        </nav>
    </header>
</body>
</html>

Add CSS

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}
header {
    height: 100%;
    width: 100%;
    float: left;
    background: #4CAF50;
    padding: 0 20px;
    color: #fff;
}
.brand-logo {
    max-width: 75px;
    float: left;
    padding: 14px 0px;
}
.brand-logo img {
    max-width: 100%;
}
.navigation {
    margin: 0px;
    float: right;
}
.navigation li {
    list-style: none;
    float: left;
}
.navigation li a {
    color: #fff;
    padding: 28px 15px;
    text-transform: uppercase;
    text-align: center;
    display: block;
    text-decoration: none;
}
.navigation li a i {
    width: 100%;
    font-size: 20px;
    margin-bottom: 7px;
}
.show-menu-btn,
.hide-menu-btn {
    transition: 0.4s;
    font-size: 30px;
    cursor: pointer;
    display: none;
}
.show-menu-btn {
    margin: 0px;
    float: right;
}
.show-menu-btn i {
    line-height: 100px;
}
.navigation a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
    color: #00ff0a;
}
#toggle-btn {
    position: absolute;
    visibility: hidden;
    z-index: -1111;
}

/*-- Responsive CSS --*/
@media screen and (max-width:767px) {
.show-menu-btn,
.hide-menu-btn {
    display: block;
}
.navigation {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #49d24f;
    top: -100%;
    left: 0;
    padding: 50px 0px;
    transition: 1s;
}
.navigation li {
    width: 100%;
}
.navigation li a {
    padding: 15px 15px;
    text-align: left;
}
.navigation li a i {
    width: auto;
    font-size: 20px;
}
.hide-menu-btn {
    position: absolute;
    top: 15px;
    right: 20px;
}
#toggle-btn:checked ~ nav .navigation {
    top: 0px;
}
}
</style>

Leave a Comment