Header Search

This element allows you to add a search icon inside your header that opens up a search form in a number of different ways.. Header overlay, sliding/fading below the header or full screen.

Note – supports being used with popular WordPress search plugins such as Relevanssi for customising search results.

Force search open in builder – When designing the form in the builder, you can toggle on this setting to leave the form always open. Otherwise, it’ll open/close when clicking the icons.

Search Layout – There are currently three layouts;

  • Below header – Slide down or fade in just below the header
  • Overlay header – Open up over the contents of the header (or container within the header)
  • Full screen – Take up the full screen.

Form height – If using the below header layout, here you can set the height for when the search form is revealed.

Transition duration – Change the transition speed for the reveal animation.

Search max-width – For all search layouts, the width can set to either be content width (the container width you have in your theme settings), full width or any custom width. (you’ll likely also need to amend the form padding to match the padding of the rest of your header)

Placeholder text – Customise the text that appears in the search form before the user starts typing.

Form styles – Both the form and the search input can be fully styled from the UI.

Icons – There are two icons, the ‘open search icon’ that appears on page load, and the ‘close search icon’ which is positioned inside the search form itself. Both can be customised, the close icon can also be removed (clicking the open search icon again or pressing ESC will also close the search form)


Support FAQ

The search form is touching the sides of the viewport on smaller screens – Use the ‘form padding’ setting to add space either side.

I have multiple rows in my header and only want the search overlay to go over one, not the whole header – Change the positioning of the chosen section/container to position relative.