Published on Apr 9, 2020

Menu-Push Header Search in Oxygen

David Browne

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 ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right