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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 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.

ul.menu-links {
	margin: 0px;
	padding: 0px;
	background: #999;
}

ul.menu-links li {
	list-style-type: none;
	display: inline-block;
	margin: 4px 10px 4px 10px
}

ul.menu-links li a {
	color: #fff;
	text-decoration: none;
}

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


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

.closebar,
.openbar {
	display: none;
	z-index: 9999;
}

.openbar,
.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() {
$('body').addClass('menu-opened');
$("#sidebar-open").hide();
$("#sidebar-close").show();
$(".sidebar").css({"right": "0px"});
}

function closeNav() {
$('body').removeClass('menu-opened');
$("#sidebar-open").show();
$("#sidebar-close").hide();
$(".sidebar").css({"right": "-250px"});
}

Screenshot

Add Comments