Header search in custom header

HI! I want to insert default search in my custom header here


so it is almost the same (with autocomplete). How it can be done?

This search:

2 Likes

I assume this is a custom header within Discourse and you aren’t looking to get Discourse search on another site, is that correct?

I’ve got a minimal example of a theme component that relocates search to the above-site-header plugin outlet: GitHub - awesomerobot/example-widget-reopen at search-header-example… this is based on previous work in existing components like Search Banner and Header Search

The example is mostly unstyled, but gets you a functional search button and menu.


Note that this overrides the existing header search functionality and repackages it in a way that will work in a plugin outlet, so you’ll want to hide Discourse’s default search icon because it will no longer work correctly. This may also need maintenance from time to time if we update our search functionality.

This adjusts our search-menu widget in the init-header-search.js file, adds it to a component in search-header.hbs and then adds that component to the plugin outlet in custom-header-connector.hbs. You can add additional header content to either of those hbs files, or change which plugin outlet the component is added to by changing the /above-site-header directory.

4 Likes

That`s a great example, thanks a lot. How to correctly make the search hidden by default and open on click on search icon?