Published on Sep 2, 2020

Full Screen Search in Oxygen

This members-only tutorial provides the steps to set up a fullscreen search using the Modal component in Oxygen.

Step 1

Let us change the output of the search form and other elements to HTML 5.

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.

Edit your Main Catch All template with Oxygen.

Add an Icon component in a Header Row where you would like to show the magnifying glass search icon.

Give it a padding of say, 10px on all sides to increase the clickable area.

Custom CSS:

This is a premium members-only content.

Already a member? Log in below or here.