<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://fonts.googleapis.com/icon?family=Material+Icons"> <nav class="navbar navbar-expand bg-primary position-relative shadow-sm"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link text-white" href="#"><i class="material-icons">menu</i></a> </li> </ul> <ul class="navbar-nav ml-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link search-button text-white" href="#"><i class="material-icons">search</i></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#"><i class="material-icons">more_vert</i></a> </li> </ul> </div> <div class="search-bar d-flex bg-white position-absolute w-100 h-100" style="overflow: hidden; max-width:0px; transition: all 0.2s ease-in-out; opacity: 0;"> <a href="#" class="search-back text-dark d-flex align-items-center text-decoration-none"> <i class="material-icons px-3">arrow_back</i> </a> <input type="text" class="form-control border-0 rounded-0 w-100 h-100" placeholder="Search" /> </div> </nav>

.search-bar { right: 0; top: 0; } .search-bar input { font-size: 18px; padding: 0; } .search-bar input:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; }

$(document).ready(function(){ $('body').on('click', '.search-button', function(e){ e.preventDefault(); $('.search-bar').css({'max-width':'100%', 'opacity': '1'}); $('.search-bar input').focus(); }); $('body').on('click', '.search-back', function(e){ e.preventDefault(); $('.search-bar').css({'max-width':'0px', 'opacity': '0'}); }); });