How to Add a Dynamic Search Icon to Oxygen Builder

I recently switched one of my blogs from Divi to the Oxygen Builder, mainly because I’d heard about how lean and fast the code was.

I’m really happy with the result, but it took some effort to build some of the native Divi elements in Oxygen. One of these was Divi’s main menu search icon. When you click it, a search field fades in over the main menu.

This functionality isn’t available in Oxygen natively, but I was able to build something very close with just a few lines of code.

In my Oxygen version, the magnifying glass icon is still 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):

You can see the actual site at https://www.disablemycable.com/blog/.

Here’s how I did it.

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.

Adding the Search Box

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

Hiding the Search Box

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" ).css('height', '46px');
  else
    jQuery( "#_header_row-63-2691" ).css('height', '0px');
}

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



2 thoughts on “How to Add a Dynamic Search Icon to Oxygen Builder”

Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.