Header Search (Pro)

The Header Search module allows you to add a custom search toggle to the site header. It adds a new section under Header > Header Search with the following options:

Enable On

The Enable On settings allow you to choose which screen sizes the Header Search icon should be displayed on. Selecting the Desktop and Mobile option will display the Header Search icon at all screen sizes.

Colors

There are multiple color settings provided for the Header Search icon and search form.

Search Toggle Location

Allows you to change the location of the Search Toggle icon to the left of the primary menu or the right of the primary menu.

Header Search Style

Changes the appearance and animation of the Header Search form.

Input and Button Text

Changes the default text shown in the search form input field and the search form submit button. The search form button can also be hidden by unchecking the "Display search form button" checkbox.

Search Form and Input Spacing

The width setting controls the maximum width of the search form inside the Header Search section. The Spacing slider adjusts the spacing above and below the search form. The Input Spacing setting allows you to adjust the search input field padding, overriding the default input field padding:

Search Toggle Padding, Margin and Size

Controls the amount of padding and margin the search toggle button has. The Size setting adjusts the size of the search toggle magnifying glass icon.


Search Close Spacing and Size

Controls the amount of padding around the search close icon button. The size setting adjusts the size of the search close button icon.