The Total theme offers a built-in pop-up search feature that can be toggled using a header menu search icon. Choose from multiple styles and either use a preset icon or upload your own custom search SVG icon.
This documentation is for the search pop-up when using the default theme header. If you are using the header builder, you will only have access to the Modal (Live Search) functionality. Please refer to the header builder documentation for more info.
Enabling or Disabling the Search Icon in the Header Menu
You can enable or disable the header search icon in your menu by navigating to Appearance > Customize > Header > Search. The first setting, labeled “Menu Icon”, controls this feature.
This on and off option will enable the icon in the menu next to your other menu items. If you are using a “Flex” header style please refer to the following section which explains how you can display the search icon separate from your menu.
Note that the Modal (Live Search) pop-up is a global option and can also be enabled through various builder elements, such as the Horizontal Menu, Off-Canvas Menu, Button, and Icon elements.
Displaying the Search Icon Outside of the Menu (Flex Header Styles)
If you are using one of the flex header styles you have the ability to disable the search icon in the menu and display it in the “Header Aside” container instead. This allows the icon to display separately from the menu.
Simply use the header_search_icon shortcode inside the Header Aside field like in the screenshot below.
Learn more about the Header Search Icon shortcode.
Choose Your Search Style
Total offers five search styles, giving you the flexibility to pick the one you prefer and ensuring compatibility with different menu layouts and site designs
- Dropdown: The default search pop-up is a basic search form that “drops-down” below the header. You can preview this style on the original base demo.
- Modal: The modal search allows you to choose between a “Live Search” feature or a modal window that will redirect to the search results. The search icon on these docs use the Modal search style with the live search disabled. You can preview the live search feature on the Off-Canvas Menu element showcase page.
- Site Overlay: Displays a search form that covers the whole page with a dark background and a white form (background color can be adjusted in the customizer). The Mason demo features this search pop-up style.
- Header Replace: The header replace style hides the logo and menu as the header is replaced with a search form. You can preview this style on the Publisher demo.
- Custom Link: The custom link style can be used if you create a custom search results page that you wish to link to directly rather then a pop-up search.