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.

How to Add a Search Bar to Your 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:

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.

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:

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

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.