How to create a Floating Search Bar

How to design a floating search bar like the below image?

A floating search bar like this covers the entire screen and lets the user focus on just one call to action, i.e. search. If you want your users to perform more search on your website, this is the way to go.

Codeless ways for adding a floating search bar

The underlying idea on building the floating search bar is that it should have a simple search bar that looks like any other search bar.

Once you click on the search bar you will see the screen covering up in dark with a little bit of transparency being maintained.

The search bar will cover up the screen where user is clearly focused and not distracted as he’s searching.

Let’s get started with the code

You can take a look at this pen

<div class="navbar">
  <div class="search">
    <input type="text" name="search" class="search-text" placeholder="Search..."/>
    <img class="search-icon" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUzLjYyNyA1My42MjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzLjYyNyA1My42Mjc7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBkPSJNNTMuNjI3LDQ5LjM4NUwzNy43OTUsMzMuNTUzQzQwLjQyMywzMC4wNDYsNDIsMjUuNzA5LDQyLDIxQzQyLDkuNDIsMzIuNTgsMCwyMSwwUzAsOS40MiwwLDIxczkuNDIsMjEsMjEsMjEgIGM0LjcwOSwwLDkuMDQ2LTEuNTc3LDEyLjU1My00LjIwNWwxNS44MzIsMTUuODMyTDUzLjYyNyw0OS4zODV6IE0yLDIxQzIsMTAuNTIzLDEwLjUyMywyLDIxLDJzMTksOC41MjMsMTksMTlzLTguNTIzLDE5LTE5LDE5ICBTMiwzMS40NzcsMiwyMXogTTM1LjU2NywzNi4wOTNjMC4xNzgtMC4xNzIsMC4zNTMtMC4zNDcsMC41MjUtMC41MjVjMC4xNDYtMC4xNTEsMC4zMDQtMC4yOSwwLjQ0NS0wLjQ0NWwxNC4yNjIsMTQuMjYyICBsLTEuNDE1LDEuNDE1TDM1LjEyMywzNi41MzdDMzUuMjc4LDM2LjM5NiwzNS40MTYsMzYuMjM4LDM1LjU2NywzNi4wOTN6IiBmaWxsPSIjRkZGRkZGIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
  </div>
</div>

<div class="full-screen-search">
  <div class="close">
    x
  </div>
  <div class="search-container">
    <input type="text" placeholder="Search...">
    <button>Search</button>
  </div>
</div>

We place the search on the navigation bar bar just like regular search and as the user clicks on it it will pop up, displaying the contents of div with class full-screen-search

body {
  background: #BBD2C5;
background: -webkit-linear-gradient(to right, #292E49, #536976, #BBD2C5);  
background: linear-gradient(to right, #292E49, #536976, #BBD2C5);
  margin: 0;
}

.navbar {
  height: 70px;
  width: 100%;
  background: #111;
  box-shadow: -2px -2px 12px 3px;
}
.search {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 25px;
}
.search-text {
  height: 30px;
  border: none;
  border-bottom: 1px solid white;
  width: 200px;
  background: #000;
  color: white;
  font-size: 16px;
}
.search-icon {
  width: 25px;
  height: 25px;
  padding-bottom: 6px;
  border-bottom: 1px solid white;
  cursor: pointer;
}

.full-screen-search {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background: rgba(0,0,0,0);
  display: none;
  justify-content: center;
  align-items: center;
  animation: expandSearch;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.full-screen-search .close{
  position: fixed;
  top: 20px;
  right: 20px;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  cursor: pointer;
}

.search-container input {
  background: transparent;
  width: 600px;
  border: none;
  border-bottom: 1px solid white;
  font-size: 24px;
  height: 40px;
  color: white;
}
.search-container button {
  height: 40px;
  border: 2px solid white;
  background: transparent;
  color: white;
  width: 200px;
  font-size: 16px;
  cursor: pointer;
}

@keyframes expandSearch {
  from {
  }
  to {
    background: rgba(0,0,0,0.8)
  }
}

We are setting the position of the full screen search to fixed and top, bottom, left and right to 0. This will make the search bar cover the entire screen.

Initially, the full screen is set to display: none, when we would want it to pop up we will set the display to flex using Javascript.

Finally we add a little JS that will help us in toggling the full screen search

var searchText = document.querySelector('.search-text');
var searchButton = document.querySelector('.search-icon');
var fullScreenDiv = document.querySelector('.full-screen-search');
var closeBtn = document.querySelector('.close');

function showScreen() {
  searchText.blur();
  fullScreenDiv.style.display = 'flex';
}

function hideScreen() {
  fullScreenDiv.style.display = 'none';
}

searchButton.onclick = showScreen;
searchText.onclick = showScreen;
closeBtn.onclick = hideScreen;

When the JS is added you can click on the search button or the search input. It will open up the floating search bar.

You can further customise the animation and style as per your preference to make it suit your needs

Add Search to your Website