<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://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="login_bar"> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li class="search"> <a href="#"><i class="fas fa-search"></i></a> <div class="search_bar"> <form> <input type="text" name="search" placeholder="Search"> <span class="search_icon"><i class="fas fa-search"></i></span> </form> </div> </li> </ul> </div> </div> </div> </div>

.login_bar { float: right; } .login_bar ul { margin: 0; padding: 0; } .login_bar ul li { list-style: none; display: inline-block; margin: 0 15px 0 0; padding: 0 0 20px; } .login_bar ul li:last-child { margin: 0; } .login_bar ul li a { font-family: "Poppins", sans-serif; font-weight: 400; letter-spacing: 1px; font-size: 12px; color: #222222; text-transform: uppercase; } .login_bar ul li a span { margin: 0 5px; } .login_bar ul li a:hover { text-decoration: none; } .login_bar ul li:hover > a { color: #dd7e2e; } .login_bar ul li.search a { font-size: 14px !important; } .login_bar ul li.search .search_bar { position: absolute; right: 15px; top: 100%; opacity: 0; visibility: hidden; transition: all 0.5s ease 0s; z-index: 999; } .login_bar ul li.search .search_bar input { background: #222222; padding: 12px; width: 330px; z-index: 99; box-shadow: 0px 4px 5px 0px #707070; border: none; font-size: 14px; color: #fff; } .login_bar ul li.search .search_bar span.search_icon { position: absolute; top: 10px; right: 14px; color: #bcbcbc; z-index: 999; font-size: 14px; } .login_bar ul li.search:hover .search_bar { opacity: 1; visibility: visible; z-index: 999; }