Home » Responsive Navigation Menu Bar in HTML CSS | Dark Mode & Search Box

Responsive Navigation Menu Bar in HTML CSS | Dark Mode & Search Box

Categories: Navigation Bar
Responsive Navigation Menu Bar in HTML CSS with Dark Mode and Search Box

In this article, you will learn how to create a Responsive Navigation Menu Bar in HTML CSS with a clean design, dark mode toggle, and a functional search box. This navbar is fully responsive and works perfectly on both desktop and mobile devices. It is one of the most popular projects for beginners who are learning HTML and CSS.

Features of This Responsive Navigation Menu

  • Mobile-friendly responsive design
  • Dark mode toggle button
  • Built-in search box
  • Clean and modern UI
  • Easy to customize with CSS

Watch Full Video Tutorial : Responsive Navigation Menu Bar in HTML CSS | Dark Mode & Search Box

If you prefer a step-by-step video tutorial, you can watch it here:

Source Code for Responsive Navigation Menu

Below is the complete HTML, CSS, and JavaScript code for building a responsive navigation menu bar with dark mode and search functionality:

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 Navigation Menu Bar in HTML CSS | Dark Mode & Search Box</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <header class="header">

        <div class="logo">
            <a href="#">Ravi Ranjan</a>
        </div>

        <nav class="menu-wrap">
            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Feedback</a></li>

            </ul>
        </nav>

        <div class="main-toggle-wrap">
            <a href="#" class="darkmode-toggle">
                <i class='bx bxs-moon moon-icon'></i>
                <i class="bx bx-sun sun-icon"></i>
            </a>
            <a href="#" class="search-form">
                <form action="">
                    <div class="form-group">
                        <input autocomplete="off" class="search-input" placeholder="Search">
                        <button class="search-action" type="submit" value="">
                            <i class="bx bx-search"></i>
                        </button>
                    </div>
                </form>
            </a>
            <a href="#" class="mobile-menu-toggle"><i class='bx bx-menu'></i></a>
        </div>

    </header>
</body>

</html>

CSS Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    --body-color: #fff;
    --header-bg: #0055a6;
    --header-color: #ffffff;
    --menu-color: #fff;
    --menu-bg: #2f8ae2;
    --mobilemenu-color: #25262e;
}

body {
    background-color: var(--body-color);
}

body.dark {
    --body-color: #0f1015;
    --header-bg: #1c1c26;
    --menu-bg: #eaebf033;
}

/* ===========Header Start======== */
.header {
    background-color: var(--header-bg);
    width: 100%;
    height: 60px;
    padding: 0 5%;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 99;

}

.header .logo {
    flex: 3;
}

.header .logo a {
    color: var(--header-color);
    font-size: 35px;
    font-weight: 600;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-decoration: none;
}

.menu-wrap {
    flex: 6;
}

.menu-wrap .slide-menu-header {
    display: none;
}

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

.menu-wrap ul>li {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 5px;
}

.menu-wrap ul>li>a {
    font-size: 15px;
    text-decoration: none;
    color: var(--header-color);
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 14px;
    border-radius: 3px;
}

.menu-wrap ul>li>a.active,
.menu-wrap ul>li>a:hover {
    background: var(--menu-bg);
    transition: .5s;
}

/* ===========Main Toggle Wrap== */
.main-toggle-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.darkmode-toggle {
    width: 50px;
    height: 25px;
    padding: 5px;
    background-color: var(--menu-bg);
    font-size: 20px;
    color: var(--header-color);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 22px;
    transition: all ease;
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.darkmode-toggle i {
    position: absolute;
    transition: all 0.5s ease;
}

.darkmode-toggle i.sun-icon {
    opacity: 0;
}

.main-toggle-wrap .mobile-menu-toggle {
    display: none;
}

body.dark .darkmode-toggle i.moon-icon {
    opacity: 0;
}

body.dark .darkmode-toggle i.sun-icon {
    opacity: 1;
    margin-left: 20px;
}

/* =====search box=== */
.search-form {
    position: relative;
}

.search-input {
    width: 100%;
    height: 32px;
    border-radius: 5px;
    background-color: var(--menu-bg);
    font-family: inherit;
    font-size: 13px;
    color: var(--menu-color);
    font-weight: 400;
    padding: 0 10px;
    border: 0;
    outline: none;
}

.search-input::placeholder {
    color: var(--header-color);
    opacity: .8;
}

.search-action {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    line-height: 35px;
    border-radius: 5px;
    background-color: var(--menu-bg);
    color: var(--header-color);
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border: 0;

}

/* =====search box=== */

/* ============Responsive code===== */
@media(max-width:1200px) {
    .header .logo a {
        font-size: 25px;
    }

    .menu-wrap ul>li>a {
        padding: 7px 8px;
    }
}

@media(max-width:992px) {
    .menu-wrap {
        position: fixed;
        width: 300px;
        height: 100vh;
        background-color: #1e2228;
        top: 60px;
        left: -100%;
        transition: all .6s;
        overflow-y: scroll;
    }

    .menu-wrap::-webkit-scrollbar {
        display: none;
    }

    .menu-wrap.show-hide {
        left: 0;
        transition: all 0.6s;
    }

    .menu-wrap ul {
        flex-direction: column;
        padding: 20px 15px;
    }

    .menu-wrap ul>li {
        margin-bottom: 10px;
    }

    .menu-wrap ul>li>a {
        display: block;
        padding: 12px 14px;
    }

    .main-toggle-wrap .mobile-menu-toggle {
        display: flex;
        text-decoration: none;
        background-color: var(--menu-bg);
        color: var(--header-color);
        font-size: 30px;
        cursor: pointer;
        z-index: 20;
        box-sizing: border-box;
        padding: 4px;
        border-radius: 5px;
    }
}

@media(max-width:576px) {
    .menu-wrap {
        width: 100%;
    }

    .search-form {
        display: none;
    }
}

JavaScript Code:

// ======Menu hide and show====
const menuIcon = document.querySelector(".mobile-menu-toggle");
const navbar = document.querySelector(".menu-wrap");
menuIcon.addEventListener("click", () => {
  navbar.classList.toggle("show-hide");
});

// ======Dark Mode=====
const body = document.querySelector("body");
const darkmode = document.querySelector(".darkmode-toggle");
darkmode.addEventListener("click", () => {
  body.classList.toggle("dark");
});

Why Build This Project?

Creating a Responsive Navigation Menu Bar using HTML CSS is an excellent project for web development beginners. It helps you understand:

  • How to design a navigation bar
  • How to add responsive behavior for mobile screens
  • How to implement a dark mode toggle using JavaScript
  • How to add a search box inside a navbar

Conclusion

By following this tutorial, you can easily create a modern responsive navbar in HTML and CSS with a professional design. You can also add extra features like dropdown menus or animations to make it more attractive.

Live Demo

Related