# Header search plugin
**URL:** https://meta.discourse.org/t/header-search-plugin/36435
**Category:** Plugin
**Tags:** deprecated
**Created:** [December 8, 2015, 7:05pm UTC](https://meta.discourse.org/t/header-search-plugin/36435 "2015-12-08T19:05:57Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 8, 2015, 7:05pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/1 "2015-12-08T19:05:57Z")
> \*\* **Please note** \*\*\*
>
> I am no longer supporting this plugin. Please use the [Header Search Theme](https://meta.discourse.org/t/header-search-theme/67959) instead.
>
> [See further](https://meta.discourse.org/t/header-search-plugin/36435/97).
Repo: [GitHub - angusmcleod/discourse-header-search: A Discourse plugin that makes the search bar visible in the header · GitHub](https://github.com/angusmcleod/discourse-header-search)
Also available as a theme: [Pavilion Header Search Theme Component](https://meta.discourse.org/t/header-search-theme/67959)
Makes the search bar visible in the header in the Desktop UI and hides the search menu icon. It only affects the Desktop UI. It does not affect mobile web.
When you scroll down on a topic the header search bar is hidden and the normal search menu icon reappears. This is to allow the topic title, category labels and tags to display (aka the ‘extra info’).
If you want the search bar to be right-aligned:
Add this CSS in admin customise:
```plaintext
.header-search-enabled .contents {
display: flex;
justify-content: space-between;
&:before, &:after {
display: none;
}
.title {
flex: 1 1 auto;
}
.search-header {
float: right;
margin-left: 0;
margin-right: 10px;
}
}
```
---
### Author:  [@Joey\_Tuan](https://meta.discourse.org/u/Joey_Tuan)
#### Post date: [December 9, 2015, 7:57am UTC](https://meta.discourse.org/t/header-search-plugin/36435/2 "2015-12-09T07:57:49Z")
@angus nice! Just one issue: it did indeed affect mobile, causing formatting to mess up.
The culprit:
```css
.d-header .contents {
min-width: 740px;
}
```
That should not have affected mobile css but it did. Once I overrode that on mobile css, I was good.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 9, 2015, 1:37pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/3 "2015-12-09T13:37:10Z")
Ah! Indeed. I added that without checking it properly. Thanks, will fix.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 9, 2015, 2:04pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/4 "2015-12-09T14:04:54Z")
@Joey_Tuan That should do the trick
[https://github.com/angusmcleod/discourse-header-search/commit/26547b992e984934f3b9383af40ac3d8468891be](https://github.com/angusmcleod/discourse-header-search/commit/26547b992e984934f3b9383af40ac3d8468891be)
---
### Author:  [@Joey\_Tuan](https://meta.discourse.org/u/Joey_Tuan)
#### Post date: [December 11, 2015, 10:16pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/5 "2015-12-11T22:16:49Z")
@angus just a heads up: there’s also a css conflict between this and the popular babble plugin: [https://meta.discourse.org/t/babble-a-chat-plugin](https://meta.discourse.org/t/babble-a-chat-plugin). I’ll dig into the cause too.
Causes the chat pane to get stretched out super wide:
---
### Author:  [@Joey\_Tuan](https://meta.discourse.org/u/Joey_Tuan)
#### Post date: [December 11, 2015, 10:41pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/6 "2015-12-11T22:41:14Z")
@angus it’s this line that caused the conflict:
```css
.d-header .contents {
min-width: 740px;
}
```
I removed it, and it seemed to not break the header search UI from what I can tell?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 12, 2015, 1:49pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/7 "2015-12-12T13:49:52Z")
@Joey_Tuan It stops the UI from breaking if the window size is less than the width of the combined header elements. It’s a relatively marginal case, but if you reduce the width your window with the plugin installed you’ll see what I mean. Nevertheless, you’re right. It’s a ham-fisted approach to the issue. One sec, I’ll come up with a different way to do the same thing..
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 12, 2015, 8:33pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/8 "2015-12-12T20:33:45Z")
@Joey_Tuan I’ve made the search fully responsive and removed that css rule. Now the search input will resize if you resize the window and auto-hide if the header bar becomes too small to contain it. All CSS (and JS for that matter) is contained to the plugin elements, so there is no possibility of further conflict.
[https://github.com/angusmcleod/discourse-header-search/commit/6ebe6284ab0b2bc0739e2ca24cd10d815ba5e48c](https://github.com/angusmcleod/discourse-header-search/commit/6ebe6284ab0b2bc0739e2ca24cd10d815ba5e48c)
---
### Author:  [@dcgavril](https://meta.discourse.org/u/dcgavril)
#### Post date: [March 16, 2016, 2:31pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/9 "2016-03-16T14:31:07Z")
Hi, first of all thanks for the plugin, it’s very useful.
Now, we have an issue related to the button text that could be too long and it will ruin the site aspect with the text underneath the menu. This happens when the category/subcategory name is long enough or the screen size is small enough. You can see a sample in the attached screen capture:
As a fix, I was thinking of giving a possibility to enable/disable the category title from the seach button, so it will just say Search or something like that, and you can place the category title in the search box if you would like.
Thanks again.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [March 17, 2016, 12:31pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/10 "2016-03-17T12:31:24Z")
Thanks for the feedback. Yes I think the setting is not a bad idea. I may do that on the weekend. In the meantime, I’ve made the category search title format the same as the topic search title format, i.e.: “Search this category” so you can continue to use this.
[https://github.com/angusmcleod/discourse-header-search/commit/11ee96c0ac00f92c5a1fb50dbc0e63f3fb0d4bd4](https://github.com/angusmcleod/discourse-header-search/commit/11ee96c0ac00f92c5a1fb50dbc0e63f3fb0d4bd4)
---
### Author:  [@dcgavril](https://meta.discourse.org/u/dcgavril)
#### Post date: [March 17, 2016, 10:25pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/11 "2016-03-17T22:25:30Z")
Hi,
Just done an update for discourse and it messed up the search bar
I was on an update frenzy and this time was not a good idea ☹
discourse-header-search (11ee96c)
**Discourse version** :
Version v1.5.0.beta13b +3 - discourse (03a1aa0)
+2 crashed the search bar
Waiting for any advise. Thanks!
PS: I believe this affected the search bar [FIX: vertical centering of header, using display: table · discourse/discourse@1b4e0f3 · GitHub](https://github.com/discourse/discourse/commit/1b4e0f3300e5927c4531322a0beb1928a484a9e7)
@neil
Update 2:
discourse (77242e4) - back to normal. Thanks @sam
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [March 18, 2016, 12:24pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/12 "2016-03-18T12:24:16Z")
> [@dcgavril](#):
>
> discourse (77242e4) - back to normal.
@dcgavril You’re all good for now? Any other issues with this plugin?
---
### Author:  [@dcgavril](https://meta.discourse.org/u/dcgavril)
#### Post date: [March 18, 2016, 12:53pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/13 "2016-03-18T12:53:54Z")
@angus Yes, everything seems ok now, we just need to keep an eye on the commit that @sam reverted [Revert "FIX: vertical centering of header, using display: table" · discourse/discourse@37ccfbd · GitHub](https://github.com/discourse/discourse/commit/37ccfbdb2a63a4ffe84dab056469f894d69b7b3a)
As it’s going to affect the search bar placement.
Thank you all for the quick fix.
---
### Author:  [@Fred\_vom\_Jupiter](https://meta.discourse.org/u/Fred_vom_Jupiter)
#### Post date: [March 22, 2016, 9:42am UTC](https://meta.discourse.org/t/header-search-plugin/36435/14 "2016-03-22T09:42:33Z")
awesome plugin.
just an other issue:
if i minimize my window, the search field is shrinking and won’t get bigger any more until I refresh my site,
log at this picture.
any idea why?
thanks for your help
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [March 25, 2016, 12:31am UTC](https://meta.discourse.org/t/header-search-plugin/36435/15 "2016-03-25T00:31:47Z")
Hey @Fred_vom_Jupiter. Thanks for the bug report.
May I ask what browser you are using? Also, could you perhaps take a screencast?
The bar should be resizing automatically when you resize the browser window. Playing around with it just now it seems to be working OK in Chrome.
Cheers.
---
### Author:  [@robbyk](https://meta.discourse.org/u/robbyk)
#### Post date: [April 10, 2016, 2:37am UTC](https://meta.discourse.org/t/header-search-plugin/36435/16 "2016-04-10T02:37:03Z")
> [@angus](#):
>
> es I think the setting is not a bad idea. I may do that on the weekend. In the meantime, I’ve made the category search title format the same as the topic search title format,
Can this plugin be installed if you hosted Discourse through a one-click install?
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [April 10, 2016, 9:53am UTC](https://meta.discourse.org/t/header-search-plugin/36435/17 "2016-04-10T09:53:08Z")
Depends on which one-click install you’re talking about. There might be some installers out there that don’t use our standard Docker image, which could make them incompatible with custom plugins.
But the Digital Ocean installer? Yes.
---
### Author:  [@romdos](https://meta.discourse.org/u/romdos)
#### Post date: [April 14, 2016, 2:54pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/18 "2016-04-14T14:54:41Z")
The header search plugin interferes with the poll plugin, in particular the un-ordered list elements to hide the search area also hide the poll’s results.
I listed the bug [here](https://meta.discourse.org/t/poll-options-hiding-when-losing-focus/42404) and removed all plugins to see where the issue was. After re-adding the header search plugin, the polls results start being hidden again (when scrolling or clicking away from the poll area).
I believe the problem is [this line in the SCSS](https://github.com/angusmcleod/discourse-header-search/blob/master/assets/stylesheets/header-search.scss#L63), which seems to effect all ul elements, so I’m guessing it instead needs to specify the header search’s class or id only.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [April 15, 2016, 2:12pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/19 "2016-04-15T14:12:50Z")
@romdos Hey thanks for the bug report. tbh I’ve never made a poll before. On a brief attempt on my local the plugin doesnt seem to work…aren’t you just mean’t to include 'Poll: ’ in the topic title?
In terms of the source of the issue I doubt it’s that line of CSS as that is actually nested inside `header-search-contents`. See here: [discourse-header-search/assets/stylesheets/header-search.scss at master · angusmcleod/discourse-header-search · GitHub](https://github.com/angusmcleod/discourse-header-search/blob/master/assets/stylesheets/header-search.scss#L6)
In other words, that CSS selector actually resolves to `.header-search-contents .results ul`.
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [April 15, 2016, 3:42pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/20 "2016-04-15T15:42:48Z")
> [@angus](#):
>
> I’ve never made a poll before. On a brief attempt on my local the plugin doesn’t seem to work…aren’t you just mean’t to include 'Poll: ’ in the topic title?
It’s changed, make a list surrounded by [poll].
```plaintext
[poll]
- A banana charade
- Defensive egg fortress
[/poll]
```
[Next page](https://meta.discourse.org/t/header-search-plugin/36435.md?page=2)