How to Create a responsive navbar with icons

How to Create a responsive navbar with icons

Create 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 enter a website and it links to the other main parts.
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.

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 must use CDN link to show nav icons.

Read Also: Learn HTML Online.
Tell’s in the comment section how this article was helpful for you.

    Leave Your Comment

    Your email address will not be published.*

    E.g. "Muhammad Ali"
    E.g. https//softcodeon.com