In this members-only tutorial, we'll look at implementing a simple header search in Oxygen. Clicking the search icon will reveal a search row underneath the header. This works great for headers that have lots of menu items and not much room for a search form.
Live Demo - Inspired by the search form at Webflow's blog
Using a separate header row to store the search form is quite convenient as it makes it easy to use with sticky headers.
Also, even once the form is revealed, it still doesn't make the header feel cramped as there is lots of space for the user to type their search term.
Using Oxygen's Header Builder
We'll stick to using Oxygen's built-in solution for headers as then we get functionality such as sticky header out of the box. Also, it means we can apply this technique to existing headers made in Oxygen.
Let's walk through it.
Add the Search Icon
We can add a search icon easily using Oxygen's icon component. This is the element we'll be using as the toggle to open up the search, we'll give it a class 'header-search-icon'. It can be placed anywhere inside a header builder.
Create a new Header Row
Adding a new header row is done easily by selecting the header builder and clicking 'Add another row'. We'll give the new header row a class of 'search-row' and give it a background colour and text colour.
Now we need to place a search form inside that row using the search form component and placing it inside row center. The final structure will need to look like this. The search row needs to come after the existing header rows.
It will currently look pretty ghastly at this point, but we're just getting the structure in place.
Adding Placeholder Text to the Search Form
Next, we need to activate html5 support for search, so the search form has some placeholder text. This is done in WordPress by adding the following code snippet.