How TO - Responsive Top Navigation
Tags: javascript, css, html, programming
Published: 2021-12-14 14:31:27

<u></u><h2>Learn how to create a responsive top navigation menu with CSS and JavaScript.<h2>

Responsive Navigation Bar
Resize the browser window to see how the responsive navigation menu works:



![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"] 
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2aq6y1e9hs7ymhmxfa7.jpg)

![ A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mrugav5obowx8zo97tr.jpg)
  
Create A Responsive Topnav

Step 1)<Strong> Add HTML</strong>:
Example
```
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
```


![ A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94mrrngr8zzbwsi7yi6w.jpg)

The link with class="icon" is used to open and close the topnav on small screens.

Step 2) <Strong> Add CSS </Strong> ;
Example
```
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
```

![ A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en7wjzmk31jeg5bhtb0q.jpg)
<Strong> 
Add media queries
</Strong> :

Example
```
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
```

Step 3) <Strong> Add JavaScript</Strong> :
Example
```
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
```

![ A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"]
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9wde6oflfg3zjyy8y1d.jpg)

Here the <a href = " https://jddp1t.mimo.run/index.html"> Output</a>

Hopefully, the tutorial above has helped you a lot to learn how to make a Menu Bar 
  If you like my post, please like the article 
Follow me 👇
<a href= "https://twitter.com/HarshitKhaladk1" target ="blank"> <u>**Twitter**</u> </a> <br>
   <a href= "https://www.quora.com/profile/Harshit-Khaladkar" target="blank"> <u>**Quora**</u></a> <br>
  <a href="https://www.duolingo.com/ph.UJ4Srn" target="blank"> <u>**Duolingo**</u> 
  </a>