How to Create Responsive Navbar Using HTML, CSS, and JavaScript

A navbar(navigation bar) is like a menu for your website that helps visitors easily find important pages like Home, About, Services, and Contact. A good navbar makes your website easy to use and look professional.

But what if somebody visits your website on a smaller screen, like a phone or tablet? A normal navbar looks messy or it takes too much space. That's why we need a responsive navbar.

A responsive navbar changes its layout depending on the screen size. That is, if on the computer screen, it all sits in a row-but on a phone, that would shrink into a simplistic "hamburger" menu to make sure the website acts and looks nice on each device. Recently I teach about how to create Login form using HTML and CSS. I hope that blog will also help you to boost your CSS skills.

In this tutorial, we are going to learn how to create a responsive navbar using HTML, CSS, and a little JavaScript. Don’t worry—it’s easier than you think! Let’s get started.

Video Tutorial of Responsive Navbar

I created a detailed video tutorial about how to create a responsive navbar using HTML, CSS, and JavaScript. In the video, I’ve explained everything in simple terms and made it easy to follow, even if you’re a beginner.

Steps to Create Login Form

• Create a new folder by naming it whatever you like, eg: navbar.
• Inside it, you create the following files: index.html, style.css and app.js.
• In this project, we will use Google Fonts(poppins) and Fontawesome for icons.

HTML Structure

Create the structure of the navbar in HTML.

    <header>
       <div class="nav">
         <div class="container">
           <div class="main-nav">
             <div class="logo">
               <h3>Uvais Codes</h3>
             </div>
             <div class="nav-menu">
               <ul>
                 <li>Home</li>
                 <li>About us</li>
                 <li>Services</li>
                 <li>Projects</li>
                 <li>Blog</li>
                 <li>Contact us</li>
               </ul>
             </div>
             <div class="nav-btn">
               <button>
                 Get in Touch <i class="fa-solid fa-arrow-right"></i>
               </button>
             </div>
             <div class="icon">
               <i id="bar" class="fa-solid fa-bars"></i>
             </div>
           </div>
         </div>
       </div>
    </header>

CSS

Now style the navbar making it visually appealing and responsive.

  
    @import
    url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", serif;
  }
  
  body {
      background-color: #FFF6F9;
  }
  
  .container {
      margin: auto;
      width: 95%;
  }
  
  ul li {
      list-style-type: none;
  }
  
  .nav {
      width: 100%;
      padding: 16px 0;
      background-color: #fff;
  }
  
  .main-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .logo h3 {
      font-size: 22px;
  }
  
  .nav-menu ul {
      display: flex;
      margin-left: 140px;
  }
  
  .nav-menu ul li {
      margin-right: 60px;
      font-size: 17px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.4s ease;
  }
  
  .nav-menu ul li:hover {
      color: #ff0a54;
  }
  
  .nav-btn button {
      border: none;
      outline: none;
      background-color: #ff0a54;
      color: #fff;
      padding: 16px 24px;
      border-radius: 30px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.4s;
  }
  
  .nav-btn button:hover {
      background-color: #000;
      transform: translateY(-5px);
  }
  
  .nav-btn button i {
      margin-left: 4px;
      transform: rotate(-45deg);
      transition: all 0.4s;
  }
  
  .nav-btn button:hover i {
      transform: rotate(0);
  }
  
  .icon {
      font-size: 25px;
      display: none;
  }

Responsive Design

Now let's make the navbar responsive for mobile and tablet devices.

    @media screen and (max-width: 992px) {
        .nav-menu ul {
            margin-left: 0;
        }
    
        .nav-menu ul li {
            font-size: 20px;
            font-weight: 500;
        }
    
        .icon {
            display: block;
        }
    
        .nav-btn button {
            font-size: 14px;
            padding: 10px 15px;
            margin-left: 50px;
            background-color: #fff;
            color: #ff0a54;
        }
    
        .nav {
            background-color: #ff0a54;
            color: #fff;
        }
    
        .nav-menu ul {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background-color: #ff0a54;
            color: #fff;
            position: absolute;
            top: 73px;
            left: -100%;
            /* Initially off-screen */
            height: 100%;
            width: 100%;
            text-align: center;
            padding: 50px 0 0 30px;
            gap: 30px;
            z-index: 1;
    
              transition: transform 0.5s ease-in-out;
    
            /* Smooth slide effect */
            transform: translateX(0);
            /* Default position */
        }
    
        .nav-menu ul.showMenu {
            transform: translateX(100%);
            /* Slide in from left */
        }
    
    }
    
    /* tablet responsive */
    
    @media screen and (min-width: 768px) and (max-width: 992px) {
        .nav-btn button {
            font-size: 14px;
            padding: 10px 15px;
            margin-left: 400px;
            background-color: #fff;
            color: #ff0a54;
        }
    }
    
    @media screen and (min-width: 993px) and (max-width: 1024px){
        .nav-menu ul li{
            margin-right: 25px;
            font-size: 16px;
        }
        .nav-btn button{
            padding: 10px 16px;
            font-size: 14px;
        }
    }

JavaScript

The JavaScript code toggles the navigation menu for mobile screens. When the toggle icon (hamburger menu) is clicked, the menu slides in or out.

    const icon = document.querySelector(".icon");
    const ul = document.querySelector(".nav-menu ul");
    const bar = document.getElementById("bar");
    
    icon.addEventListener("click", () =>{
        console.log(ul);
        ul.classList.toggle("showMenu");
        
        if (ul.classList.contains("showMenu")) {
            bar.className = "fa-solid fa-xmark";
        } else {
            bar.className = "fa-solid fa-bars";
        }
    } )

Conclusion

By following these steps, you’ve successfully create a simple, responsive navbar using HTML, CSS, and JavaScript. 🎉 Customize logo, menu and button as your design.

If you found this helpful, don’t forget to check out more tutorials on Uvais Codes! 🚀

Download the source Code

You May Like This:

Login Form in HTML and CSS

Contact Us Page

Social Media Icons with Hover Effects

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.