# Header search in custom header

**URL:** https://meta.discourse.org/t/header-search-in-custom-header/249481
**Category:** Development
**Created:** [December 20, 2022, 1:24pm UTC](https://meta.discourse.org/t/header-search-in-custom-header/249481 "2022-12-20T13:24:12Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 20, 2022, 7:43pm UTC](https://meta.discourse.org/t/header-search-in-custom-header/249481/2 "2022-12-20T19:43:11Z")

</div>

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 · GitHub](https://github.com/awesomerobot/example-widget-reopen/tree/search-header-example)… this is based on previous work in existing components like [Advanced Search Banner](https://meta.discourse.org/t/search-banner/122939) and [Advanced Header Search](https://meta.discourse.org/t/header-search/194093)

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

 ![Screenshot 2022-12-20 at 2.30.24 PM](https://global.discourse-cdn.com/meta/original/4X/2/6/c/26c5559a4946079e8ecd943d086e821b10b76d70.png)  
 ![Screenshot 2022-12-20 at 2.30.29 PM](https://global.discourse-cdn.com/meta/original/4X/6/8/e/68e9842af3a738c984e303e5477aba4690d0072c.png)

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](https://github.com/awesomerobot/example-widget-reopen/blob/search-header-example/javascripts/discourse/api-initializers/init-header-search.js) file, adds it to a component in [search-header.hbs](https://github.com/awesomerobot/example-widget-reopen/blob/search-header-example/javascripts/discourse/templates/components/search-header.hbs) and then adds that component to the plugin outlet in [custom-header-connector.hbs](https://github.com/awesomerobot/example-widget-reopen/blob/search-header-example/javascripts/discourse/connectors/above-site-header/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.

---

_[View the full topic](https://meta.discourse.org/t/header-search-in-custom-header/249481)._