<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <li class="header-menu-list-item header-menu-bar d-none d-lg-block" > <span class="side-nav"> <i class="fa fa-bars baar"></i> </span> <!--sidebar--> <div class="side-menu text-center"> <a href="javascript:void(0)" class="closebtn">×</a> <ul class="menu-vertical"> <li class="menu-item"> <a href="">Home</a> </li> <li class="menu-item"> <a href="">About us</a> </li> <li class="menu-item"> <a href="">Services</a> </li> <li class="menu-item"> <a href="">Contact</a> </li> </ul> </div> <!--sidebar-end--> </li>

.side-menu { z-index: 1; background: #ffffff; padding-top: 1.85714286em; margin: 0; height: 100%; box-shadow: 0px 0px 5px #000; width: 250px; position: fixed; right: 0px; top: 0; overflow-x: hidden; transition: 0.5s; padding-top: 60px; display: none; } .side-menu a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 24px; color: #818181; display: block; transition: 0.3s; } .side-menu a:hover { color: #FFCA2A; } .side-menu .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .header-menu-bar { .baar { font-size: 24px; cursor: pointer; color: #FFCA2A; } span { cursor: pointer; width: 50px; box-shadow: 0 0px 5px #000; height: 50px; border-radius: 50%; text-align: center; background: #fff; display: inline-block; line-height: 55px; transition: 0.2s ease; } }