Table of contents

Introduction

What is Navbar?

What is Responsive Navbar?

Creating a Responsive Navbar

4.1.

Responsive Navbar with a Dropdown Menu

4.2.

Responsive Navbar with Hamburger Menu

Importance of Responsive Navbar

Frequently Asked Questions

6.1.

What is the difference between nav and navbar?

6.2.

What is responsive web design?

6.3.

What is the main purpose of the Navbars?

Conclusion

Last Updated: Mar 27, 2024

Medium

Responsive Navbar

Author Muskan Sharma

Introduction

Hey Readers!! Have you ever thought every time we open a new website, we know where to go, and how to find the right thing?

This happens because the website navigates us through its interface called Navbar.

Have you ever thought how the same navbar is present on a Desktop and also on a small screen of mobile phone? This is because of the Responsive Navbar.

The Responsive Navbar helps in collapsing the web page's menu. Now what to do to make a responsive Navbar.

Don’t worry!! You’re at the right place. Coding Ninjas have got your back.

In this article, you will get an understanding of what a responsive navbar is. Importance of responsive navbar, how to create responsive navbar.

So, let’s begin to explore more about the responsive navbar.

What is Navbar?

Navbar or the navigation bar is a UI element of the webpage that creates a link to the other components of the website. Meaning, we can say that the navbar helps you navigate between webpage sections.

Let’s say you visit a website and want to access another section of the website. Then Navbar helps you go to that section easily, and all the sections are accessible.

What is Responsive Navbar?

A responsive Navbar is the same as the navbar, but the only difference is the responsiveness. A responsive navbar is a UI element that links the website's different sections and collapses the menu element according to the screen size.

Suppose you have visited the Coding Ninjas website on your laptop. Then, the elements of the navbar will acquire the whole screen size. But when you visit on your mobile phone. Then the navbar elements will be dropped down, which helps increase the accessibility and ease for the user. This is what we call the responsive navbar.

Creating a Responsive Navbar

Let's create a responsive navbar on a webpage with the help of HTML and CSS.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>NavBar</title>
</head>
<body>


<div class="nav" id="mynav">
    <li>Coding Ninjas</li>
    <li>Home</li>
    <li>Articles</li>
    <li>Courses</li>
    <li>Contact Us</li>
</div>


<div style="padding-left:16px">
  <h2>Responsive Navbar Example</h2>
  <p>Hey Ninjas!! Welcome to Coding Ninjas</p>
  <p>Play with the size of the screen and check how the responsive navbar works</p>
</div>
<script src="script.js"></script>
</body>
</html>

Now to beautify the webpage, we’ll use the CSS.

CSS:

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .nav {
    overflow: hidden;
    background-color: #333;
  }
  
  .nav li {
   float: left;
  list-style: none;
  color: #f2f2f2;
  padding: 14px 16px;
  font-size: 17px;

  }

  @media (max-width: 600px) {
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      .nav {
        display: grid;
        background-color: #333;
      }
      
  }

Output:

Let's learn to create a responsive navbar with a dropdown menu.

Responsive Navbar with a Dropdown Menu

Dropdown Menu is a set of options on a computer screen after clicking the menu's name. For example, when you visit the coding ninjas website. There you see an option on the navbar named Pratice, and when you hover over that, you see a list of options called a dropdown menu.

Let us create the Responsive Navbar with a Dropdown Menu.

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="nav" id="mynav">
        <a>Coding Ninjas</a>
        <a>Home</a>
        <a href="javascript:void(0);" class="icon">
            <select name="dropdown" id="dropdown">
                <option hidden>Article</option>
                <option value="">DSA</option>
                <option value="">React</option>
                <option value="">Machine learning</option>
                <option value="">Networking</option>
            </select>
        </a>
        <a>Courses</a>
        <a>Contact Us</a>
    </div>

    <div style="padding-left:16px">
        <h2>Responsive Navbar with dropdown menu</h2>
        <p>Hey Ninjas!! Welcome to Coding Ninjas</p>
    <p>You can check the dropdown menu by clicking on the article.</p>
    </div>
</body>

</html>

CSS:

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .nav {
    overflow: hidden;
    background-color:black;
  }
  
  .nav a {
   float: left;
  list-style: none;
  color: #f2f2f2;
  padding: 14px 16px;
  font-size: 17px;

  }

  #dropdown{
    background-color: black;
    color: white;
    height: 22px;
    width: 76px;
    font-size: 17px;
    border: 0;
  }

  @media (max-width: 600px) {
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      .nav {
        display: grid;
        background-color: black;
      }
      
  }

Output:

Now it's time to create a responsive navbar with a hamburger menu.

Responsive Navbar with Hamburger Menu

The hamburger menu or icon is the button that generally opens into a side menu or navigation drawer on websites and mobile apps. It is an icon with three lines on the rightmost side of the navbar.

Now let us create a responsive navbar with a hamburger menu.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>NavBar</title>
</head>
<body>
<div class="nav" id="mynav">
    <a>Coding Ninjas</a>
    <a>Home</a>
    <a>Articles</a>
    <a>Courses</a>
    <a>Contact us</a>
    <a href="javascript:void(0);" class="icon" onclick="clicktoshow()">
    <div class="hamburger"></div>
    <div class="hamburger"></div>
    <div class="hamburger"></div>
    </a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Navbar Example with a Hamburger Menu</h2>
  <p>Hey Ninjas!! Welcome to Coding Ninjas</p>
  <p>Play with the size of the screen and check how the responsive navbar with Hamburger Menu works</p>
</div>
<script src="script.js"></script>
</body>
</html>

CSS:

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}


.nav {
  overflow: hidden;
  background-color: #333;
}

.nav a {
float: left;
list-style: none;
color: #f2f2f2;
text-decoration: none;
padding: 14px 16px;
font-size: 17px;


}

.nav .icon {
  display: none;
}


@media (max-width: 600px) {
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
    float: right;
    display: block;
  }
  .hamburger{
    width:35px;
    height:4px;
    background-color: white;
    margin: 2px 0;
   }
  
  .nav.responsive {position: relative;}
  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

JavaScript:

function clicktoshow() {
    var x = document.getElementById("mynav");
    if (x.className === "nav") {
      x.className += " responsive";
    } else {
      x.className = "nav";
    }
  }

You can also try this code with Online Javascript Compiler

Run Code

Output:

Importance of Responsive Navbar

Here are some points why a responsive navbar is important.

Accessibility: Responsive navbar helps the user access all the information on the website.
Traffic on the website: Responsive navbar helps increase the website's traffic. A responsive navbar keeps your user on your website for a longer period of time and browses through your menu.
User search: Responsive navbar helps facilitate the user's search. It helps the user to search for the relevant information they want on the website.
Internal links: Responsive navbar helps the user to visit all the pages present on the webpage without any hassle.

Frequently Asked Questions

What is the difference between nav and navbar?

A navbar is a page section containing navigation elements (links, buttons) for navigating to other pages on the website. A nav is an HTML element typically used inside other navigation-related components. The elements enclosed in the nav will render on the navbar.

What is responsive web design?

Responsive web design, often known as RWD design, is a current web design method that allows websites and pages to appear on all devices and screen sizes by dynamically changing the screen, whether it will be a phone or a desktop.

What is the main purpose of the Navbars?

Nav bars allow us to navigate within a website more easily. A navbar or menu organizes links to other internal web pages. They can be hidden or easily accessible, helping users navigate to the most useful or interesting pages.

Conclusion

In this article, we learned what a navbar and responsive navbar are. Importance of a responsive navbar and creating a responsive navbar. We hope this article helped you in knowing more about the responsive navbar.

If you want to learn more, refer to these articles:

For more information, refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Python, Data Structures and Algorithms, Competitive Programming, System Design, and many more!

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences and interview bundles, follow guided paths for placement preparations, and much more!!

Happy Learning Ninja!!

Live masterclass

Switch from non tech to high paying data analytics profile

by Alka Pandey, Data Scientist @ Hindustan Unilever

09 Oct, 2024

01:30 PM

117+ registered

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Group, Ex - Udaan, OYO

08 Oct, 2024

01:30 PM

584+ registered

Switch from non tech to high paying data analytics profile

by Alka Pandey, Data Scientist @ Hindustan Unilever

09 Oct, 2024

01:30 PM

117+ registered

Master PowerBI using Netflix Data

by Ashwin Goyal, Product @ HRS Group, Ex - Udaan, OYO

08 Oct, 2024

01:30 PM

584+ registered

View more events