UI.X 2

Search

General options

Search position - This setting allows you to set where the search bar appears. Locations include the staff bar, navigation (left or right) or tablinks.

Navigation (left)

Navigation (right)

Staff bar

Section links

Header row

Search bar height - This setting allows you to set the search bar height.

Search bar width - This setting allows you to set the search bar width. This is required for minimal search animation.

Add Button to the QuickSearch - This setting makes the search icon a functional submit button, and moves it to the right side of the input.

Responsive options

Viewport width to show search icon - This setting allows you to enter the maximum viewport width at which the search icon replaces the search bar. Such width includes 10000px for always icon and 0px for never.

Search icon behavior - Sets the behavior for the search icon (when the search is only an icon, and not the full input). Options are:

• Dropdown - Uses the default XenForo search dropdown.
• Expand - Expands the search bar to an input that spans the full width of the header.
• Expand (mobile only) - Uses Dropdown for screen sizes tablet and larger, then switches to the Expand function for mobile only.

Dropdown

Expanded

Focused search options

These options change the colors of the search bar when it is focused.

• Search bar placeholder color - The color of the palceholder text before focus.
• Search bar placeholder color (focus) - The color of the palceholder text when focused.
• Search icon color (focus) - The color of the search icon when focused.