<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 ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="searching"> <center> <a href="javascript:void(0)" class="search-open"> <i class="fa fa-search"></i> </a> </center> <div class="search-inline"> <form> <input type="text" class="form-control" placeholder="Searching..."> <button type="submit"> <i class="fa fa-search"></i> </button> <a href="javascript:void(0)" class="search-close"> <i class="fa fa-times"></i> </a> </form> </div> </div> <script> var sp = document.querySelector('.search-open'); var searchbar = document.querySelector('.search-inline'); var shclose = document.querySelector('.search-close'); function changeClass() { searchbar.classList.add('search-visible'); } function closesearch() { searchbar.classList.remove('search-visible'); } sp.addEventListener('click', changeClass); shclose.addEventListener('click', closesearch); </script>

/* search start */ .search-inline { width: 100%; left: 0; padding-left: 15px; padding-right: 15px; top: 0; height: 10%; position: absolute; opacity: 0; visibility: hidden; background-color: #efefef; z-index: 9; transition: all .5s ease-in-out; } .search-inline.search-visible { opacity: 1; visibility: visible; animation: fadeInDown 0.4s ease-in-out; } .search-inline button[type="submit"] { position: absolute; right: 52px; top: 0; background-color: transparent; border: 0px; top: 0; right: 80px; padding: 0px; cursor: pointer; width: 80px; height: 99%; background: #222; color: #fff; } .search-inline .form-control { border: 0px; padding-left: 0; font-size: 2rem; position: absolute; left: 1%; top: 0; height: 100%; width: 99%; font-family: "Montserrat", sans-serif; font-weight: 700; outline: none; } .search-inline .search-close { position: absolute; top: 0; right: 0; color: #616161; width: 80px; height: 100%; text-align: center; display: table; background: #efefef; text-decoration: none; } .search-inline .search-close i { display: table-cell; vertical-align: middle; } .form-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #efefef; background-clip: padding-box; border: 1px solid #efefef; border-radius: .25rem; transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -20%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }