Popover Search in Oxygen

This members-only tutorial provides the steps to set up a search icon in the header right which when clicked smoothly animates in a search form below the icon when using Oxygen. Clicking anywhere outside on the page closes the search form.

Follow the steps below to learn how to build this floating search button.

Step 1

It is September 2020 and Oxygen does not yet include HTML 5 output for elements like the search form and WP galleries out of the box. Let’s fix that.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add support for HTML5 markup

Code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Set the snippet to run everywhere. Save changes and activate.

Step 2

Edit your Main Catch All template with Oxygen.

Add a Div in Header’s Builder’s Header Row where you would like to show the search icon. In my test site, I added it under the Menu in Header Row’s Row Right.

Add an Icon component inside the Div.

Add a class of search-icon to the element.

Set a 16px magnifier icon from the Linearicons set.

Padding: 10px on all sides.

Custom CSS:

cursor: pointer;

Add a Search Form component below the icon.

Add a class of site-search-form to the element.

Padding: 20px on all sides.

Advanced > Layout
Visibility: hidden
Position: absolute with Top: 100% and Right: 0.

Advanced > Borders
Edit individual radii under Border Radius. Set Bottom Left and Bottom Right to 6px each.

Advanced > Effects
Opacity: 0
Transition: .4 sec duration, ease timing function and all for CSS Property.