Updated on June 26, 2020

In this members-only tutorial we'll look at how to reveal a search form in the header that pushes the menu up from the bottom of the header when the user clicks the search icon.

This type of header search provides a nice, simple alternative to a few other header search tutorials we have covered. It solves the same problem of where to hide the search bar when it's not being used. This is time it's hiding underneath a pro menu element, revealed when the icon is clicked.

Live Demo

The sliding in of the search is done with transforms so it's nice and smooth. They key to hiding the search form is placing it inside it's own container where we have set the overflow to hidden. This makes sure it's both invisible and not clickable while it's hidden, but also makes sure it doesn't interfere with the pro menu's sub menus, which will still need to overflow the header.

Let's walk through it;

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: