How to Add a Dynamic Search Bar to Oxygen Builder

Annoyingly, the Oxygen builder doesn’t really provide a built-in search form that pops out when you click a button (like you see in other themes like Kadence or Divi). You have to build it yourself.

In my Oxygen version, the magnifying glass search icon is to the right of the menu. When you click it, the search field slides out below the main menu. Clicking the magnifying glass again slides it back in.

Here’s what it looks like (click Play button to see animation):

Note, since writing this article I’ve migrated that site back to Divi for various reasons. But the code below should still work for Oxygen.


Adding the Search Icon

The first step is to add the magnifying glass icon to the right of your main menu.

  1. Edit your main Oxygen template containing your site’s header.
  2. Then add an Icon (Basics -> Icon) to the right of your main menu.
  3. Search for the string “search” and you’ll see some magnifying glass options. Make sure you have selected the Font Awesome set.
  4. Choose the one you want.
  5. Adjust the icon size and color. (I chose 21px size).
  6. Add some left padding as needed. (I added 20px).
  7. In the Advanced -> Custom CSS section for the Icon, add “cursor: pointer;”
  8. In the Advanced -> Attributes section for the Icon, add the attribute “tabindex” with value “0”. This is so that keyboard users can tab to your magnifying glass (accessibility compliance).

OK, you should now have a magnifying glass icon to the right of your main menu that doesn’t do anything, other than change the mouse pointer to a pointer instead of an arrow when you hover over it.

Oh, and you should be able to tab to it using the keyboard, but again, it won’t do anything when you hit return.

Next you’ll want to add the search box. I did this by adding another Row to my Header Builder. I simply copied one of the existing ones and deleted the content.

In the rightmost section of the row, add a Search Form (WordPress -> Search Form).

In the front end, it should look like this:

Oxygen Builder search field in main header
Search form in Oxygen header

Once the search box is to your liking, it’s time to hide it.

Go back to the row containing your search box and set its height to zero under Size and Spacing.

Then add this custom CSS to that row:

overflow:hidden;
transition: height 0.5s;

The row containing your search box should be hidden! Of it’s not, make sure you’ve set the height to zero in Size and Spacing.

Adding the Magic (the Animation)

Now for the magical part. Right below your Search form, add a Code block (Basics -> Code Block).

Header structure showing Search Form and Code Block below it
Header structure showing Search Form and Code Block below it

Remove the default PHP code, then add the following JavaScript code to it:

var dmc_search = false;

function toggleSearchRow() {
  dmc_search = !dmc_search;
  if ( dmc_search )
    jQuery( "#_header_row-63-2691" ).attr('style', 'height: 46px !important');
  else
    jQuery( "#_header_row-63-2691" ).attr('style', 'height: 0px !important');
}

jQuery( "#fancy_icon-69-2691" ).click( toggleSearchRow );

// THIS PART IS FOR KEYBOARD ACCESSIBILITY
jQuery( document ).on( "keypress", "#fancy_icon-69-2691", function(e) {
  if (e.which == 13) 
    toggleSearchRow();
});

Now, replace “#fancy_icon-69-2691” with the ID of your icon. Then, replace “_header_row-63-2691” with the ID of the row containing your search form.

If you save everything and clear caches, clicking the search button should cause the search form to slide out! Clicking again will cause it to slide in.

Debugging

If it’s not working, check your browser’s inspector to see if there are any JS errors. If still not working, check your IDs. Let me know if you find any errors in my description!


Styling for Mobile

Okay, you should now have a dynamic search form that works great on desktop. But on my iPhone, the Search field and button spilled over to two lines, and so it was chopped and looked terrible when slid out.

To solve this, we need to limit the width of the search field. I did this by adding this CSS to the code block above.

#_search_form-72-2691 form {
  text-align: right;
}
#_search_form-72-2691 #s {
  max-width: calc(100% - 100px);
}

Replace “_search_form-72-2691” with the ID of the row containing your search form. If you’ve changed any styling, you might need to adjust the max-width parameter. Be sure to test on a variety of phones, as I’ve only tested on iPhone 7. The value of 100px may need to be increased if your search form takes up two lines.

The result should look like this:

Search form in Oxygen Builder on mobile
Search form on mobile

Conclusion

I hope this was helpful! I was pretty stoked to get this done. Please leave your comments, corrections, and questions below! – Brian


Please Leave a Question or Comment

Subscribe
Notify of
guest
8 Comments
Inline Feedbacks
View all comments
Rick Mann
3 months ago

Hey Brian,

Thanks for the tutorial. I seem to having trouble making this work. I’m pretty sure I’ve done everything correctly. When I click on the magnifying glass I get nothing. I hate having to ask for help but here I am.

Thanks Rick

Dragan
5 months ago

Exactly what I need but I can’t make it right.
I did everything as described and I am not getting JS errors, but it does not work.

Should the code be placed in HTML/PHP field or JavaScript?

Thank you!

Dylan Griffiths
Dylan Griffiths
10 months ago

The toggleSearchRow function didn’t work for me at first. I had to make a small modification:

function toggleSearchRow() {
dmc_search = !dmc_search;
if ( dmc_search )
jQuery( “#_header_row-61-6” ).attr(‘style’, ‘height: 46px !important’);
else
jQuery( “#_header_row-61-6” ).attr(‘style’, ‘height: 0px !important’);
}

usman
1 year ago

no working

Shares
%d bloggers like this: