How to designing responsive Navigation bar using HTML and CSS

Every website needs Navigation bar to navigate on the website properly and this is very usefull for users as well.If a website does not have good navigation interface, users prefer to leave this type of website immediately.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div style="font-size:30px;cursor:pointer" onclick="openNav()" class="menu">&#9776; MENU</div>
  <nav id="navbar">
  
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About Us <i class="fa fa-angle-down" style="font-size:16px"></i></a>
			<div class="submenu">
				<ul>
					<li><a href="#">Who We Are</a></li>
					<li><a href="#">Mission and Vission</a></li>
					<li><a href="#">What We Do</a></li>
				</ul>
			</div>
	  
	  </li>
      <li><a href="#">Products</a></li>
	  <li><a href="#">Services <i class="fa fa-angle-down" style="font-size:16px"></i></a>
			<div class="submenu">
				<ul>
					<li class="nested"><a href="#">Website <i class="fa fa-angle-down" style="font-size:16px"></i></a>
							<div class="submenu-2">
							<ul>
								<li><a href="#">Designing</a></li>
								<li><a href="#">Development</a></li>
								<li><a href="#">Maintenance</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">Marketing</a></li>
					<li class="nested"><a href="#">Mobile App <i class="fa fa-angle-down" style="font-size:16px"></i></a>
						<div class="submenu-2">
							<ul>
								<li><a href="#">Designing</a></li>
								<li><a href="#">Development</a></li>
								<li><a href="#">Mobile Marketing</a></li>
							</ul>
						</div>
					
					</li>
				</ul>
			</div>
	  
	  </li>
	  <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  
  <!-- Mobile Menu -->
  <div id="myNav" class="overlay">
  <b class="name">MENU</b>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
  
  <nav id="navbar-m">
  
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About Us <i class="fa fa-angle-down" style="font-size:16px"></i></a>
			<div class="submenu-m">
				<ul>
					<li><a href="#">Who We Are</a></li>
					<li><a href="#">Mission and Vission</a></li>
					<li><a href="#">What We Do</a></li>
				</ul>
			</div>
	  
	  </li>
      <li><a href="#">Products</a></li>
	  <li><a href="#">Services <i class="fa fa-angle-down" style="font-size:16px"></i></a>
			<div class="submenu-m">
				<ul>
					<li class="nested-m"><a href="#">Website <i class="fa fa-angle-down" style="font-size:16px"></i></a>
							<div class="submenu-2-m">
							<ul>
								<li><a href="#">Web Designing and Development</a></li>
								<li><a href="#">Digital Marketing</a></li>
								<li><a href="#">Mobile App Development </a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">Marketing</a></li>
					<li class="nested-m"><a href="#">Mobile App <i class="fa fa-angle-down" style="font-size:16px"></i></a>
						<div class="submenu-2-m">
							<ul>
								<li><a href="#">Web Designing and Development</a></li>
								<li><a href="#">Digital Marketing</a></li>
								<li><a href="#">Mobile App Development </a></li>
							</ul>
						</div>
					
					</li>
				</ul>
			</div>
	  
	  </li>
	  <li><a href="#">Contact Us</a></li>
    </ul>
	</nav>
	</div>
	</div>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20openNav()%20%7B%0A%20%20document.getElementById(%22myNav%22).style.width%20%3D%20%22100%25%22%3B%0A%7D%0A%0Afunction%20closeNav()%20%7B%0A%20%20document.getElementById(%22myNav%22).style.width%20%3D%20%220%25%22%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>


style.css

*
{
	margin:0px;
	padding:0px;
	font-family: 'Lato', sans-serif;
	
}
body
{
	background-image:url('images/bck.jpg');
	background-size:cover;
}

.menu
{
	display:none;
	
}
#navbar-m
{
	display:none;
	
}
#navbar
{
	background-image: linear-gradient(to right, #60002d,#eb0a35,#e44d25);
	color:white;
	text-align:center;
	
}
#navbar ul
{
	display:inline-flex;
	text-decoration:none;
	color:white;
	list-style:none;
}
#navbar ul li
{
	
	width:150px;
	
	padding:20px 10px 20px 10px;
	
}
#navbar ul li:hover
{
	
	background-color:#e44d25;
}
#navbar ul li a
{
	
	text-decoration:none;
	color:white;
	text-transform:uppercase;
}
.active
{
	background-color:#e44d25;
	
}
.submenu
{
	display:none;
}
#navbar ul li:hover .submenu
{
	
	background-color:#e44d25;
	display:block;
	position:absolute;
	margin-top:10px;
	margin-left:-10px;
	
}
#navbar ul li:hover .submenu ul
{
	
	text-align:left;
	
	display:block;
	margin-top:10px;
	
}
#navbar ul li:hover .submenu ul li
{
	width:200px;
	border-bottom:1px solid black;
	padding-left:33px;
	padding-right:33px;
	
}
#navbar ul li:hover .submenu ul li:hover
{
	background-color:black;
	
}
.submenu-2
{
	display:none;
}

.nested:hover .submenu-2
{
	
	background-color:black;
	display:block;
	position:absolute;
	margin-top:-39px;
	margin-left:220px;
}
.nested .fa-angle-down
{
	float:right;
	
}

@media screen and (max-width: 900px){

body
{
	background-image:url('images/bck.jpg');
	background-size:auto;
}

.menu
{
	display:block;
	background-color:black;
	color:white;
	padding:10px;
	
}
#navbar
{
	display:none;
	
}

#navbar-m
{
	display:block;
	background-color: rgba(0,0,0, 0.0);
	color:white;
	text-align:left;
	
}	
#navbar-m ul
{
	
	display:block;
	text-decoration:none;
	color:white;
	list-style:none;
}
#navbar-m ul li
{
	
	width:auto;
	padding:10px;
	
	
}
#navbar-m ul li:hover 
{
	
	background-color: rgba(0,0,0, 0.0);
}
#navbar-m ul li a
{
	width:auto;
	text-decoration:none;
	color:white;
	text-transform:uppercase;
	border-bottom:1px solid #f97e1b;
}
.active
{
	background-color: rgba(0,0,0, 0.0);
	
}
.submenu-m
{
	display:none;
}
#navbar-m ul li:hover .submenu-m
{
	width:auto;
	display:block;
	position:relative;
	margin-top:10px;
	background-color: rgba(0,0,0, 0.0);
	
	
}
#navbar-m ul li:hover .submenu-m ul
{
	
	text-align:left;
	
	display:block;
	margin-top:10px;
	padding-left:30px;
	
}
#navbar-m ul li:hover .submenu-m ul li
{
	width:auto;
	border-bottom:0px solid black;
	background-color: rgba(0,0,0, 0.0);
	padding-left:0px;
	padding-right:0px;
	
}
#navbar-m ul li:hover .submenu-m ul li:hover
{
	background-color: rgba(0,0,0, 0.0);
	
}
.submenu-2-m
{
	display:none;
}

.nested-m:hover .submenu-2-m
{
	
	background-color: rgba(0,0,0, 0.0);
	display:block;
	position:relative;
	margin-top:8px;
	margin-left:0px;
	
	
}

.nested-m .fa-angle-down
{
	float:right;
	
}

}


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #60002d,#eb0a35,#e44d25);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 4%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 50px;
  color:white;
}
.overlay .name {
  position: absolute;
  top: 20px;
  left: 15px;
  font-size: 30px;
  color:white;
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 50px;
  top: 3px;
  right: 5px;
  }
}

Output

Laptop and Desktop View

Mobile View


Leave a Comment