Published on Jun 30, 2019
Header Search in Oxygen
Updated on June 02, 2020
This members-only tutorial provides the steps to use the modal feature in Oxygen for sliding down a full-width search form covering the header when a magnifying glass icon in the header is clicked.
Clicking anywhere on the page outside the search form or the close button will fade away the search form.
- enable placeholder text for the search form by adding support for HTML5 markup
- change the placeholder text from the
toa custom "Type what are you looking for and hit return".
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Add support for HTML5 markup
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
Set it to run only on front-end. Save changes and activate.
Add another snippet.
Title: Change search form input's placeholder text
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.