"Double navbar with search"
Bootstrap 4.1.1 Snippet by superbwebdeveloper

<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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <header class="topbar"> <div class="container"> <!--=========-TOP_BAR============--> <nav class="topBar"> <div class="container"> <ul class="topBarNav float-right"> <li> <div class=" d-sm-block"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </div> </li> </ul> </div> </nav> <!--=========-TOP_BAR============--> <nav class="navbar navbar-expand-lg navbar-dark navbar-bootsnipp animate"> <a class="navbar-brand" href="index.html"> <img src="https://via.placeholder.com/150" alt="Logo" align="center" /> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="d-xl-none d-lg-none search-block"> <form class="form-inline search-form" action="/search" method="GET" role="search"> <div class="form-group flex-fill"> <input type="text" class="form-control search-keyword" name="search_text" placeholder="Type and hit enter" /> </div> <button class="btn search-btn" type="submit"><span class="fa fa-search"></span></button> </form> </li> <li class="nav-item"> <a class="nav-link" href="basic_page.html"> Home </a> </li> <li class="nav-item"> <a class="nav-link" href="product_usages.html">SignUp</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Resorts</a> </li> <li class="nav-item"> <a class="nav-link" href="basic_fullpage.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="basic_fullpage.html">Free Concierge</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Resources</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Videos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="d-none d-xl-block d-lg-block d-md-none"> <a href="#toggle-search" class="animate"><span class="fa fa-search"></span></a> </li> </ul> </div> <div class="bootsnipp-search animate"> <div class="container"> <form class="form-inline search-form" action="/search" method="GET" role="search"> <div class="form-group mb-2"> <input type="text" class="form-control search-keyword" name="search_text" placeholder="Type and hit enter" /> </div> <button class="btn btn-danger search-btn" type="reset"> <span class="fa fa-remove"></span> </button> </form> </div> </div> </nav> </div> </header>
img { max-width: 100%; } ul{ list-style: none; } .topbar { background-color: #0d6990; } .topBarNav .fa { color: white; } .search-btn { color: #fff; background-color: #e5a125; border-color: #e5a125; } .search-btn:hover { color: #fff; background-color: #e6a630; border-color: #e6a630; } .search-form input::-webkit-input-placeholder { /* Edge */ color: #FFFFFF; } .search-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #FFFFFF; } .search-form input::placeholder { color: #FFFFFF; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-bootsnipp:nth-of-type(2) { border-top-width: 1px; z-index: 50 } .navbar-bootsnipp.affix-top { position: absolute; top: 0px; width: 100%; } .navbar-bootsnipp.affix { top: 0px; width: 100%; } .navbar-bootsnipp .navbar-nav>li>a { border: 0px solid #e6a630; } .navbar-bootsnipp .navbar-nav>li>form>.input-group>input, .navbar-bootsnipp .navbar-nav>li>form>.input-group>.input-group-btn>.btn { border-radius: 0px; } .navbar-bootsnipp .navbar-nav>li:not(.disabled).open>a, .navbar-bootsnipp .navbar-nav>li:not(.disabled).active>a, .navbar-bootsnipp .navbar-nav>li:not(.disabled)>a:hover, .navbar-bootsnipp .navbar-nav>li:not(.disabled)>a:focus { color: #e6a630; } .navbar-bootsnipp .bootsnipp-search { display: none; } .navbar-bootsnipp .bootsnipp-search .form-control { background-color: #0d6990; border-radius: 0px; border-width: 0px; font-size: 24px; padding: 30px 20px; width: 100%; color: #FFFFFF; } .navbar-bootsnipp .bootsnipp-search .form-control:focus { border-color: transparent; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-bootsnipp .bootsnipp-search .input-group-btn>.btn { padding: 14px 16px; border-radius: 0px; } .navbar-bootsnipp .bootsnipp-search .input-group-btn>.btn.active, .navbar-bootsnipp .bootsnipp-search .input-group-btn>.btn:hover, .navbar-bootsnipp .bootsnipp-search .input-group-btn>.btn:focus { padding: 14px 16px 14px 15px; } .navbar-bootsnipp .bootsnipp-search .input-group-btn>.btn-default { background-color: rgb(245, 245, 245); } .search-block .container { padding: 0px; } .navbar-expand-lg .navbar-nav .nav-link { font-size: 0.8em; } @media (min-width: 992px) { .navbar-bootsnipp .bootsnipp-search { background-color: rgb(235, 235, 235); display: block; position: absolute; top: 100%; width: 100%; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; visibility: hidden; } .navbar-bootsnipp .bootsnipp-search.open { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); visibility: visible; background-color: #0d6990; } .search-form { width: 100%; } .search-form .form-group { width: 95%; } } @media screen and (min-width: 768px) { .navbar-bootsnipp .navbar-brand { font-size: 20px; height: auto; padding: 15px 5px; } .navbar-bootsnipp .navbar-nav>li.disabled>a { padding-left: 10px; padding-right: 10px; } /*.navbar-bootsnipp .bootsnipp-search { background-color: rgb(235, 235, 235); display: block; position: absolute; top: 100%; width: 100%; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; visibility: hidden; } .navbar-bootsnipp .bootsnipp-search.open { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); visibility: visible; background-color: #0d6990; }*/ /* .search-form .form-group { width: inherit; }*/ } @media (min-width: 992px) and (max-width: 1199.98px) { .navbar-expand-lg .navbar-nav .nav-link { font-size: 0.75em; padding-right: .2em; padding-left: .2em; } } @media (min-width: 768px) and (max-width: 991.98px) { .navbar-bootsnipp .navbar-brand { font-size: 1em; height: auto; padding: 5px 5px; } .navbar-bootsnipp .navbar-nav>li.disabled>a { padding-left: 10px; padding-right: 10px; } .navbar-expand-lg .navbar-nav .nav-link { font-size: 0.8em; } } @media (max-width:991.98px) { .search-form .form-group { margin-bottom: 0; } .form-inline .form-control { width: 100%; border-radius: 5px 0px 0px 5px; border: none; height: 36px; } .search-btn { border-radius: 0px 5px 5px 0px; } .navbar-expand-lg .navbar-nav .nav-link { text-align: center; font-size: 1.2em; } } .search-form.form-inline { flex-flow: row; } @media (max-width:412px) { .navbar-dark .navbar-toggler { margin: 15px auto; } .navbar-brand { margin: auto; } }
$(document).ready(function () { $('a[href="#toggle-search"], .search-btn[type="reset"]').on('click', function (event) { event.preventDefault(); $('.search-keyword').val(''); $('.bootsnipp-search').toggleClass('open'); $('a[href="#toggle-search"]').closest('li').toggleClass('active'); if ($('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) { /* I think .focus dosen't like css animations, set timeout to make sure input gets focus */ setTimeout(function () { $('.bootsnipp-search .form-control').focus(); }, 100); } }); $(document).on('keyup', function (event) { if (event.which == 27 && $(' .bootsnipp-search').hasClass('open')) { $('a[href="#toggle-search"]').trigger('click'); } }); });

Related: See More


Questions / Comments: