Updated on June 28, 2020

In the Oxygen's Facebook group a user asked:

Please anyone help me to create search form with the search icon I would like the search form be expandable when the icon is clicked

This tutorial provides the steps to display a magnifying glass image which when clicked expands so the user can type their search query and press return to initiate a search in Oxygen.

Step 1

Add a Search Form element in the Oxygen editor. This can be found under the WordPress group.

Step 2

Add HTML5 markup support for the search form (besides other elements).

Step 3

Upload this search icon image to your Media Library.

Step 4

Add the following CSS sitewide:

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?


Find the article helpful and wish to donate?



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