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.

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: