Search 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 Content, Design 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:
- Search Icon/Image
- Placeholder Text
- 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 colors, spacing, borders, box 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
