Skip to content

Manually Toggle/Show Header Search

The Total theme includes the ability to display a search link in the header menu that will “toggle” (display) the search when clicked. However, sometimes you may want to disable the search link and use a different method for opening the search function. We’ll don’t worry it’s possible with Total via unique classnames.

Each style of header search uses a different class to display it. Below are examples of adding a link that will open that specific search style:

Overlay

<a href="#" class="search-overlay-toggle"><span class="ticon ticon-search" /></a>

Header Replace

<a href="#" class="search-header-replace-toggle"><span class="ticon ticon-search" /></a>

Dropdown

<a href="#" class="search-dropdown-toggle"><span class="ticon ticon-search" /></a>

Not using the Standard Header/Menu?

This is very important! If you are not using the standard header with the header menu search enabled then the code needed to render the search functionality won’t exist on the page. This is because Total has been coded so only what is needed gets added to the page so your site is well optimized. If you want to use this function to open the search on a custom header then you will need to use the “Overlay” search function since it’s the only one that can work currently independent of the header and you can easily enable it by adding the following code to your child theme’s functions.php file:

add_filter( 'totaltheme/header/menu/search/is_enabled', '__return_true' );

add_filter( 'totaltheme/header/menu/search/style', function( $style ) {
    $style = 'overlay';
    return $style;
} );
Back To Top