Header Search Icon

The Search Icon within the Header Builder is an icon that displays a search form in one of the following formats.

Minimal

Float Above Header

Canvas

Add a Header Search Icon

The header builder ( found in Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows. Just click on the "+" (Add) sign and a list of components will appear. From there you can add the Search Icon.

Open customizations for the Header Search Icon

To open the customizing options, just click on the newly added Search Icon component. This will open the Search Icon panel on the left side, from where you can customize the component.

Style the Header Search Icon

Advanced styling for the search icon. You can customize the size of the search icon and its normal and hover color.

Customize the Search Form

In the General tab, you can customize the placeholder used for the Search Form that appears after clicking on the Search Icon. The default value is "Search for..."

Custom padding and margin

Click on the Layout tab to have access to advanced positioning options like Alignment ( inside the header builder available space for the Search Icon component ), Padding and Margin.