Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Add a Search Bar to Your Hero Section

Search is becoming increasingly important as sites add more and more content. Depending on your industry, you might want users to search for what they need as a primary action instead of navigating your whole website. Nothing reinforces that action more than adding a search bar to your primary hero section.

When your website has a lot of pages and content, your visitors will first go for the search button instead of the navigation menu. According to the usability experts Nielsen Norman group, more than half of users are search dominant. While having well-designed navigation menus are very important, most people will rather use the search box directly rather than spending time going over the links to find what they are looking for.

This is why the search box should be easily found by users. Putting a small search icon without a box or hiding the search box in a sidebar (or worse a footer) are no-nos. Not only you should put the search box at the top part of your page but you should also make it stand out against the other elements on the page. In this tutorial, we will show you how to put a prominent search box in the hero section.

Getting Started

This tutorial uses Bootstrap and FontAwesome for the search icon so you'll need to place the links below in your project's HTML file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

The HTML code below consists of two components: the navigation bar and the hero section. It is up to you to include the code for the navigation bar but we included it to put the hero section in context and show how it would be placed and styled accordingly with the navigation bar. As an example, we included a hero section video. If you'd like to know more about building hero sections with videos, we also have a tutorial about creating a hero with a video background. Feel free to replace the video below with your own. The search bar is inside a .col-12 meaning it takes up the full width of its container. Also, by using the Bootstrap .container class, we nicely center the search box right in the middle.

  <nav class="navbar h-navbar p-0" role="navigation">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-xl-3 col-lg-2 col-sm-4 col-5">
          <a href="/">
            <img alt="LunarXP Logo" class="img-fluid py-3" src="https://raw.githubusercontent.com/solodev/hero-search-bar/master/images/logo.png" aria-role="logo">
          </a>
        </div>
        <div class="col-xl-9 col-lg-10 col-sm-8 col-7">
          <ul class="navbar-nav flex-row justify-content-end flex-wrap align-items-center mr-lg-4 mr-xl-0">
            <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
              <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>About</strong></a>
            </li>
            <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
              <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Locations</strong></a>
            </li>
            <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
              <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Products</strong></a>

            </li>
            <li class="nav-item px-3 text-uppercase mb-0 position-relative d-none d-lg-flex">
              <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Shop</strong></a>
            </li>
            <li class="nav-item px-3 text-uppercase my-3 my-lg-0 mr-5 mr-lg-4 mr-xl-5 d-none d-lg-flex">
              <a class="d-block w-100 h-100 text-white py-4 position-relative top-link" href="#"><strong>Contact</strong></a>
            </li>
          </ul>
          <button id="sidenav-open-btn" class="menu-hamburger position-absolute pointer p-0">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>

  <section class="hero hero--video">
    <div class="container">
      <div class="col-12">
        <div class="search">
          <form>
            <input class="input" type="text" name="s" placeholder="How may we help you?">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    </div><!-- .container-->
    <video class="d-lg-block" autoplay loop muted>
      <source src="https://raw.githubusercontent.com/solodev/hero-search-bar/master/images/hero-video.mp4" type="video/mp4">
    </video>
  </section><!-- .hero-->

CSS

Since we made most of the alignment of the search box with Boostrap's built-in grid structure, we use CSS to set its height, color and font-size. We use FontAwesome for the search icon inside the search button. Copy and paste the CSS code below in your project and feel free to customize the font and colors:

body {
  background: #14161D;
}

/* Search Bar */

.hero--video {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 600px;
}

.hero video {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  right: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.hero .search {
  position: relative;
  vertical-align: middle;
  z-index: 2;
}

.hero .search input {
  width: 100%;
  height: 76px;
  line-height: 76px;
  border: 1px solid #111;
  background: rgba(0, 0, 0, 0.8);
  font-size: 27px;
  padding: 5px 5px 5px 47px;
  color: #fff;
  position: relative;
  border-radius: 0;
}

.hero .search button {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  background: #88687b;
  font-size: 27px;
  height: 65px;
  line-height: 65px;
  width: 68px;
  padding: 0;
  border: 0;
}

/* Navigation Bar */

.menu-hamburger {
  bottom: calc(50% - 10px);
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.menu-hamburger span {
  width: 30px;
  height: 4px;
  display: block;
  background: #fafafa;
  margin-bottom: 4px;
}

.menu-hamburger span:last-of-type {
  margin-bottom: 0;
}

nav {
  background: #010101;
  z-index: 3;
}

nav .navbar-nav li.navbar-item {
  line-height: 110px;
  margin-left: -5px;
}

nav .navbar-nav li.navbar-item a {
  padding: 0 20px;
}

/* Media Queries */

@media (max-width: 575.98px) {
  nav.h-navbar {
    max-height: 70px;
  }

  nav .navbar-header img {
    max-width: 70px;
  }

  .menu-hamburger {
    bottom: calc(50% - 12px);
  }
}

@media (max-width: 767.98px) {
  nav.h-navbar {
    max-height: 90px;
  }

  .hero .search input {
    background: rgba(0, 0, 0, 0.92);
    font-size: 20px;
    padding: 5px 5px 5px 10px;
    height: 60px;
  }

  .hero .search button {
    height: 48px;
    width: 48px;
    line-height: 48px;
  }
}

@media (max-width: 991.98px) {
  nav .navbar-nav li.navbar-item a {
    padding: 0 10px;
  }

  .row {
    width: 100%;
  }
}

And there it is. You can check out the JSFiddle code below to see how it looks before committing to its use:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev