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.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/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

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: