Search Settings

  1. Content Settings
  2. Design Settings
  3. Advanced Settings

To enable the Divi MadMenu Search element open the module settings modal and go to Content->Elements and click the Enable Search. The Search element consists of the search icon and the search field which is toggled by clicking the search icon 

When the Logo element is enabled its ContentDesign and Advanced settings sections all show up in the module settings pane.

1. Content Settings

The Search element's Content settings are located in the Content->Search settings section

The following settings are available:

  1. Search Icon/Image
  2. Placeholder Text
  3. Use FiboSearch Search Form

Search Icon/Image

The Search Icon/Image field allows to use either font icon or image icon for the search button.

If the Icon option is selected then Divi's default search icon is used:

Whereas selecting the Image option allows uploading different custom image icon(s) both for the Normal and Fixed headers (if the Use Fixed Header Search Image setting is enabled) as well as for each device:

Placeholder Text

The Placeholder Text field allows setting a custom placeholder text for the search input field:

Use FiboSearch Search Form

Enabling the Use FiboSearch Search Field replaces the default search form of the Search element with the search form of the FiboSearch plugin which allows to search the WooCommerce products with live suggestions while typing the search string into to the search input field.

2. Design Settings

The  Design settings of the Search element are located in the Design tab of the module settings.

The Search Order setting allows to set the Search element order relative to other enabled header elements, it is located in the Design->Layout:General section. The element order value can be different for each device.

To align the Search icon vertically and horizontally and to set its column width use the layout settings located in the Design->Layout:Elements->S tab

The design options set of the Search element includes colorsspacingbordersbox shadow and sizing options all located in the Design->Search section in two different tabs - Normal and Fixed - for the normal and fixed headers respectively. These settings sections include design options for both the Search icon and the Search field

3. Advanced Settings

To control the responsive visibility of the Search element use the Show Search setting in the Advanced->Visibility section. 

This section also contains the Hide Elements When Search Opens setting which does what its name implies - it allows to select the elements that you want to disappear when the search icon is clicked and the search form becomes visible

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us