How to Create a responsive navbar with icons

Creating a responsive navbar with icons is important for the website. A navigation bar is one of the main parts of a website, in my opinion, It is very important because the first section that the user views when he/she enters a website and it links to the other main parts.

What is Navigation Bar?

A navigation bar is a UI element in the website which holds links to other sections of the same website or another website. In maximum websites, the navigation bar is shown on almost every page of the website but this can dispute.

Although in most cases the navigation bar is positioned horizontally at the start of the webpage(on top), in some cases, a horizontal navigation bar may not fit the website design, so in this type of case, we make a horizontal navigation bar on the top of the website. This type of horizontal navigation bar is also called a header bar, as it appears on the top of the main content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left or right side of each website.
In the navbar, the responsive navigation icons also help the users what the nav menu is about. We’re going to write a simple HTML and CSS Code to make our responsive navbar with icons on the Header.

Create a responsive navbar with icons

Read Also: How to create a responsive sticky navbar

HTML Code:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<nav>
<a class="active" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="#"><i class="fa fa-fw fa-code"></i>Code</a>
<a href="#"><i class="fa fa-fw fa-briefcase"></i>Breifcase</a>
<a href="#"><i class="fa fa-fw fa-map-marker"></i>Map</a>
</nav>

CSS Code:

<style>
* {margin:0;padding: 0; font-family: Arial, Helvetica, sans-serif;}
nav {width: 100%;background-color: #673AB7;overflow: auto;}
nav a {
  float: left;
  padding: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 17px;
}
nav a:hover {background-color: #D1C4E9;}
.active {background-color: #E040FB;}
@media screen and (max-width: 500px) {
  nav a {float: none;display: block;}}
</style>

Note: You should use the CDN link to show nav icons.

Conclusion:

You just need to create a simple HTML file and copy the above HTML and CSS code paste this code into your HTML file and see this on your web browser.

I hope this article was helpful for you to add a responsive navigation menu to your website.