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.
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:
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.
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: