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