Making a full screen search box

I really enjoy full screen search boxes where a full screen overlay pops up when you click on a search icon or link. Here is how we made it.

There are many ways to create a search box on your site. When you want to dedicate as much screen real estate to your site’s content, a search box can often distract by taking up too much space. Also, if you are running a few sites, re-styling elements takes time and having a search box means there is just another element to re-design.

What I really like at the moment are full screen search boxes. How they work is that you have an icon or a link and when you click on it, the entire screen is taken up with a simple search window.

We implemented this on sites we make on and have been really happy with the result. You can retro-fit your existing site search with this mechanism straight really easy. Over at github, we have created a project with CSS, JavaScript and HTML ready to plug in to your site. If you are interested, just get in touch with us.

by Craig Sullivan

9 Jul 2014