At first attach below fontawesome CSS and jQuery file inside head tag.

<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Now lets start step by step.

Step 1: Add below HTML Markup.

<a id="sidebar-open" href="javascript:void(0)" class="openbar d-md-none" onclick="openNav()"> 
<i class="fas fa-bars"></i> </a>
<a id="sidebar-close" href="javascript:void(0)" class="closebar d-md-none" onclick="closeNav()"> <i class="fas fa-times"></i> </a> <div class="sidebar">
<ul class="menu-links"> <li> <a href="#"><i class="fas fa-plane"></i> Flights </a> </li> <li> <a href="#"><i class="fas fa-bed"></i> Hotels </a> </li> <li> <a href="#"><i class="fas fa-umbrella-beach"></i> Holidays </a> </li> <li> <a href="#"><i class="fas fa-stamp"></i> Visa Assistance </a> </li>
</ul> </div>

Step 2: Add the below CSS with style tag. {
	margin: 0px;
	padding: 0px;
	background: #999;
} li {
	list-style-type: none;
	display: inline-block;
	margin: 4px 10px 4px 10px
} li a {
	color: #fff;
	text-decoration: none;

@media screen and (max-width: 767px) { li {
		display: block;
	} li a {
		display: block;
		padding: 4px 10px 4px 10px

/*sidebar starts*/
.sidebar {
	display: block;
	width: 100%;

.openbar {
	display: none;
	z-index: 9999;

.closebar {
	position: absolute!important;
	top: 10px;
	right: 10px;
	font-size: 30px;

@media screen and (max-width: 767px) {
	.sidebar {
		height: 100%;
		width: 250px;
		position: fixed;
		/*top: 86px;*/
		right: -250px;
		background-color: #999;
		overflow-x: hidden;
		transition: 0.2s;
		padding-top: 50px;
		z-index: 9998;
	.openbar {
		display: block;
/*sidebar ends*/

Step 3: Add the below javascript with script tag.

function openNav() {
$(".sidebar").css({"right": "0px"});

function closeNav() {
$(".sidebar").css({"right": "-250px"});


Add Comments