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.

Add a Header Search Icon

Just click on the ➕ symbol and a list of components will appear.

From there you can add the Search Icon component.

To open the customizing options, just click on the ⚙️ icon inside the Search Icon component. This will open the Search Icon panel on the left side, from where you can customize the component.

⚙️ General

Appearance > Customize > Header > Search Icon > General

There are two settings available in this area:

Placeholder

This option allows the user to add the desired text that will appear on the blank field of the Search Icon:

Open Behaviour

There are three options available for the open behaviour of the Search Icon:

Minimal

Float Above Header

Canvas

📐Layout

Appearance > Customize > Header > Search Icon > Layout

Custom padding and margin

In the Layout tab, you also have access to advanced positioning options like:

Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).
Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).

🖌 Style

Appearance > Customize > Header > Search Icon > Style

Icon

In this area you will find three options:

Icon Size - sets the size of the 🔍.
- it has a reset button, to undo the changes
Color - sets the color if the 🔍.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
Hover Color - sets the color of the 🔍 when you hover with the mouse.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.

Search Field

In this area, you will find six options:

Height - sets the height of the search field (in PX).
- it has a reset button ( Desktop | Tablet | Mobile )
Font Size - sets the size of the placeholder (in PX).
- it has a reset button ( Desktop | Tablet | Mobile )
Border Width - sets the width of the border (in PX), and has the link option, to change the values at the same time.
- Desktop | Tablet | Mobile
Border Radius - rounds the corners of the field (in PX), and has the link option, to change the values at the same time.
- it has a reset button ( Desktop | Tablet | Mobile )
Background color - sets the color of the search field.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
Text and Border - sets the color of the text inside the field and border.
- You can choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.