Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Responsive Navigation Bar in HTML CSS & JavaScript
    JavaScript

    How to make Responsive Navigation Bar in HTML CSS & JavaScript

    Coding StellaBy Coding Stella18 January 2024Updated:18 January 2024No Comments5 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hello coding enthusiasts! Today, let’s build a Responsive Navigation Bar using HTML, CSS, and JavaScript. Whether you’re a seasoned coder or just starting out, this tutorial is a fantastic way to create a user-friendly navigation experience for your website.

    We’ll keep it simple – using HTML for structure, CSS for styling, and a touch of JavaScript for that responsive magic. No need for complex setups – just easy coding to make your navigation bar adapt seamlessly to different screen sizes.

    Join me on this coding journey into the world of Responsive Navigation Bars. Let’s make it straightforward and practical with HTML, CSS, and JavaScript. Ready to enhance your website’s navigation? Let’s get started!

    HTML :

    The given code is an HTML document that represents a sidebar menu for a web application. It includes a navigation bar with various menu links, a search box, and additional options like logout and dark mode. The sidebar can be toggled open or closed using a chevron icon. The code also includes a section for the main content of the web page, in this case, a “Dashboard Sidebar” text.

    <!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>Navigation Bar with Search Box | CodingStella</title>
        <link rel="stylesheet" href="style.css" />
        <!-- Unicons CSS -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
       <script src="script.js" defer></script>
      </head>
      <body>
        <nav class="nav">
          <i class="uil uil-bars navOpenBtn"></i>
          <a href="#" class="logo">CodingStella</a>
    
          <ul class="nav-links">
            <i class="uil uil-times navCloseBtn"></i>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
    
          <i class="uil uil-search search-icon" id="searchIcon"></i>
          <div class="search-box">
            <i class="uil uil-search search-icon"></i>
            <input type="text" placeholder="Search here..." />
          </div>
        </nav>
      </body>
    </html>

    CSS :

    This CSS code provides styles for a responsive navigation menu. It begins with a global reset and sets a background color for the body. The navigation bar is fixed at the top with padding, a background color, and a box shadow. Links and other styles are defined for the navigation. The search box is initially hidden and becomes visible when the "openSearch" class is added.

    The styles also include media queries for various screen sizes, adjusting padding, search box position, and making the navigation menu collapsible for smaller screens.

    /* Google Fonts - Poppins */
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    body {
      background: #f0faff;
    }
    .nav {
      position: fixed;
      top: 25px;
      left: 0;
      width: 100%;
      padding: 15px 200px;
      background: #4b16ad;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .nav,
    .nav .nav-links {
      display: flex;
      align-items: center;
    }
    .nav {
      justify-content: space-between;
    }
    a {
      color: #fff;
      text-decoration: none;
    }
    .nav .logo {
      font-size: 22px;
      font-weight: 500;
    }
    .nav .nav-links {
      column-gap: 20px;
      list-style: none;
    }
    .nav .nav-links a {
      transition: all 0.2s linear;
    }
    .nav.openSearch .nav-links a {
      opacity: 0;
      pointer-events: none;
    }
    .nav .search-icon {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    .nav .search-box {
      position: absolute;
      right: 250px;
      height: 45px;
      max-width: 555px;
      width: 100%;
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s linear;
    }
    .nav.openSearch .search-box {
      opacity: 1;
      pointer-events: auto;
    }
    .search-box .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      left: 15px;
      color: #4a98f7;
      transform: translateY(-50%);
    }
    .search-box input {
      height: 100%;
      width: 100%;
      border: none;
      outline: none;
      border-radius: 6px;
      background-color: #fff;
      padding: 0 15px 0 45px;
    }
    
    .nav .navOpenBtn,
    .nav .navCloseBtn {
      display: none;
    }
    
    /* responsive */
    @media screen and (max-width: 1160px) {
      .nav {
        padding: 15px 100px;
      }
      .nav .search-box {
        right: 150px;
      }
    }
    @media screen and (max-width: 950px) {
      .nav {
        padding: 15px 50px;
      }
      .nav .search-box {
        right: 100px;
        max-width: 400px;
      }
    }
    @media screen and (max-width: 768px) {
      .nav .navOpenBtn,
      .nav .navCloseBtn {
        display: block;
      }
      .nav {
        padding: 15px 20px;
      }
      .nav .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100%;
        max-width: 280px;
        width: 100%;
        padding-top: 100px;
        row-gap: 30px;
        flex-direction: column;
        background-color: #11101d;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.4s ease;
        z-index: 100;
      }
      .nav.openNav .nav-links {
        left: 0;
      }
      .nav .navOpenBtn {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }
      .nav .navCloseBtn {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }
      .nav .search-box {
        top: calc(100% + 10px);
        max-width: calc(100% - 20px);
        right: 50%;
        transform: translateX(50%);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
    }

    JavaScript:

    This JavaScript code controls a responsive navigation menu. When the search icon is clicked, it toggles between showing a search bar and hiding the navigation menu. Clicking the navigation open button displays the navigation menu, while the close button hides it. The code also updates the search icon to reflect the current state.

    Overall, this script enables a smooth user experience with interactive navigation elements on the webpage.

    const nav = document.querySelector(".nav"),
      searchIcon = document.querySelector("#searchIcon"),
      navOpenBtn = document.querySelector(".navOpenBtn"),
      navCloseBtn = document.querySelector(".navCloseBtn");
    
    searchIcon.addEventListener("click", () => {
      nav.classList.toggle("openSearch");
      nav.classList.remove("openNav");
      if (nav.classList.contains("openSearch")) {
        return searchIcon.classList.replace("uil-search", "uil-times");
      }
      searchIcon.classList.replace("uil-times", "uil-search");
    });
    
    navOpenBtn.addEventListener("click", () => {
      nav.classList.add("openNav");
      nav.classList.remove("openSearch");
      searchIcon.classList.replace("uil-times", "uil-search");
    });
    navCloseBtn.addEventListener("click", () => {
      nav.classList.remove("openNav");
    });

    There you have it! We’ve successfully crafted a Responsive Navigation Bar using HTML, CSS, and JavaScript. Now, your website’s navigation is not only functional but also adapts smoothly to different devices. Great job on this coding adventure!

    If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!

    navigation menu sidebar
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous Article2024’s Game-Changing CSS Frameworks You Can’t Ignore
    Next Article How to make Star Rating using HTML & CSS
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025
    JavaScript

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 2025
    JavaScript

    How to create Animated Fanta Website using HTML CSS and JS

    20 July 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202421K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202420K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202418K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to Become a Full-Stack Web Developer?

    24 January 2024

    How to Learn Web Development ??

    21 January 2024

    Top 10 Most Popular Programming Languages of All Time

    25 January 2024

    How to make Glowing Firefly button using HTML CSS & JS

    6 August 2024
    Latest Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood