How to designing responsive Navigation bar using HTML and CSS

March 8, 2022March 6, 2022 by Ravindra

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 Cancel reply