Napili community lightning component custom header with search bar

Question

I developed a lightning component using Bootstrap for a custom header for my self-service community. I have been able to include Global Search via

<form action="/<community name>/search/SmartSearch" method="get">
  <input id="phSearchInput" type="text" name="str"/>
  <input type="submit" value="Search"/>
</form>

but this renders the standard Global Search results page instead of the Napili community template search results page. I haven't been able to figure out how to replicate the search functionality included with the Napili template. Does anyone know how to reference the Knowledge search bar used for communities instead of Global Search?

Answer 1

The solution I found was removing the search result component on the search page and adding the global search component. You could then select within the global search component which objects it would return results from

Answer 2

In Community Builder -> Theme Check the option Use a custom search component and select your customizable search lightning component. Component must implement forceCommunity:searchInterface

<aura:component implements="forceCommunity:searchInterface" access="global">
<div class="search">
    <div class="search-wrapper">
        <form class="search-form">
            <div class="search-input-wrapper">
                <input class="search-input" type="text" placeholder="My Search"/>
            </div>
            <input type="hidden" name="language" value="en" />
        </form>
    </div>
</div>

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_builder_search_and_profile.htm