<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');
}
});
});
