CSS

How to designing responsive Navigation bar using HTML and CSS

Ravindra Kumar

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>
  
</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;
  }
}

Ravindra Kumar

Ravindra is a passionate full stack developer and dedicated blogger with a flair for crafting user-friendly web applications and insightful articles. With expertise spanning front-end and back-end technologies, Ravindra brings ideas to life through innovative coding solutions.

WebsiteLinkedInGitHubYouTube

Suggested Reading

How to make sticky header using HTML and CSS

Creating a sticky header using HTML and CSS is straightforward. A sticky header remains visible at the top of the viewport as the user scrolls down the page. You can achieve this using the position: sticky property in CSS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Header</title> <link rel="stylesheet" href="styles.css"> […]