Create Mobile Friendly Navigation Bar Using HTML CSS and JavaScript

Create responsive navigation for desktop view and mobile view using HTML CSS and JavaScript.

Video tutorial of Mobile Friendly Navigation Bar Using HTML CSS and JavaScript

Create responsive navigation for desktop view and mobile view using HTML CSS and JavaScript.

Mobile Friendly Navigation Bar Using HTML CSS and JavaScript [Source Codes]

This source code can help you to create Mobile Friendly Navigation Bar Using HTML CSS and JavaScript.

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header id="header"><!--header-start-->
  <div class="container">
    <div class="header_left">
      <a class="logo" href="#"><img src="images/logo.png" alt="logo"></a>
    </div>
    <div class="header_right">
      <a href="#!" class="nav_ico"><img src="images/nav-icon.png" alt="nav icon"></a>
      <nav class="main_nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>    
    </div>
    
  </div>
</header><!--header-end-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  box-sizing: border-box;
}
body {
  background: #e4e4e4 url(../images/banner.jpg) center bottom;
  background-size: cover;
  min-height: 100vh;
  font-family:arial;
  font-size: 16px;
  margin: 0;
}
img{max-width: 100%;}



#header{
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #022335;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.container{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav_ico{
  display: block;
  width: 40px;
  cursor: pointer;
}
.main_nav {
  float: right;
}
.main_nav ul{
  margin: 0;
  padding: 0px;
  list-style: none;
}
.main_nav ul li{
  float: left;
  margin: 0 0 0 30px;
  position: relative;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 300;
  overflow: hidden;
}
.main_nav ul li a {
  color: white;
  display: block;
  line-height: 1.4;
  text-decoration: none;
}
.main_nav ul li a:before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  height: 1px;
  width: 100%;
  background: #fff;
  transition: all 0.3s ease-in-out;
}
.main_nav ul li a:after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #fff;
  transition: all 0.3s ease-in-out;
}
.main_nav ul li:hover a:before{left: 0;}
.main_nav ul li:hover a:after{right: 0;}

/*This Media Query use for iPad Portrait View*/
@media only screen and (min-width:768px) and (max-width:991px){
  .main_nav ul li{ margin: 0 0 0 15px; font-size: 16px; }

}

@media screen and (min-width: 768px){
  .nav_ico{
    display: none;
  } 
}
/*This Media Query use for Mobile View*/
@media screen and (max-width: 767px){
  .nav_ico{ 
    display: block;
    position: relative;
    z-index: 10;

  } 
  .main_nav {
    position: fixed;
    left: 0;
    top: 73px;
    padding:0;
    background: #053e5d;
    z-index: 5;
    height: calc(100vh - 74px);
    width: calc(100% - 80px);
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
  }
  .main_nav ul li {
    float: none;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid;
    text-align: center;
  }
  .main_nav ul li a {
    display: block;
    color: #fff;
    padding: 10px;
  } 
  .main_nav:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    width: 0;
    background: rgba(0, 0, 0, 0.7);
  }
  .main_nav.active{
    transform: translateX(0%);
  }
  .main_nav.active:after {
    width: 1000%;
  }

}

JavaScript Code

Copy

$(document).ready(function() {
	$(".nav_ico").click(function(){
		$(".main_nav").toggleClass("active");
	});
	$(".main_nav").click(function(){
		$(this).removeClass("active");
	});
	$( ".main_nav ul" ).click(function( event ) {
		event.stopImmediatePropagation();
	});	
});