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:

/* Expanding search form */

.oxy-search-form input[type=search] {
    width: 1px;
    padding: 0 0 0 30px;
    border: none;
    background: url(https://oxygen.test/wp-content/uploads/2018/07/search-icon.png) no-repeat 5px center;
    background-size: 20px 20px;
    cursor: pointer;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;

.oxy-search-form input[type=search]:focus {
    width: 250px;
    outline: 0;
    cursor: text;

.oxy-search-form input[type=submit] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;

Replace https://oxygen.test/wp-content/uploads/2018/07/search-icon.png with the URL of your search icon from Step 3.

Custom sitewide CSS like this can be added in Customizer > Additional CSS or in Oxygen editor’s Manage Stylesheets.


Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

15 comments on “Expanding search form in Oxygen”

  1. Good day Sridhar I just wanted to say thank you for your advice on how to create an expandable search form, thank you very much sir

  2. Sridhar in step 2 “Add HTML5 markup support for the search form (besides other elements).” how do I do this I’m a complete novice when it comes to these things

  3. Hi Sridhar, Thanks so much for this! One question, when I add this to the right of a menu in the Header Row Right, the menu gets squished, instead of shifting left as your does. Any suggestions?

  4. Per my previous comment, I misspoke, them menu does shift to the left, but the text in the menu items suddenly have line breaks. ex.
    instead of
    About Us
    it is now

    I can’t track down the cause. Any suggestions?

          1. The ngrok tunnel links will only for a short window of time. Get the not found message again when I checked it now.

            Is it possible for you recreate the issue on a live site or make the site live?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: