# 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:** 18
**Page:** 5
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [January 2, 2018, 4:10am UTC](https://meta.discourse.org/t/header-search-plugin/36435/82 "2018-01-02T04:10:31Z")
First post wikified.
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [January 5, 2018, 1:34pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/83 "2018-01-05T13:34:25Z")
I’d like to suggest a change from the word “options” towards a ⚙ icon. What do you think?
(Maybe as drop down menu with all important settings, like the Hamburger Menu)
It’s multilingual and saves limited space.
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [January 6, 2018, 9:48am UTC](https://meta.discourse.org/t/header-search-plugin/36435/84 "2018-01-06T09:48:52Z")
> [@terraboss](#):
>
> change from the word “options” towards a ⚙ icon
Alternatively I would suggest the 🔍 icon that is by default used as the search icon. That the “options” are linked to the search bar isn’t always immediately obvious, especially not with the search bar aligned to the right.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 8, 2018, 10:20am UTC](https://meta.discourse.org/t/header-search-plugin/36435/85 "2018-01-08T10:20:59Z")
You know how sometimes you stumble on a solution and feel silly for not realising it earlier?
It turns out that if we move the search-context stuff into the dropdown (like it is in the search menu) and add a search icon, it solves the visual issue you’re both referring too and also solves various space issues with having the search-context suff in the header.
With results:
Incidentally, it now looks and functions very similarly to Facebook header search.
Commits:
- Plugin: [Hide context until clicked && add search icon · angusmcleod/discourse-header-search@6d8418f · GitHub](https://github.com/angusmcleod/discourse-header-search/commit/6d8418f519801fdb22737a7d37edd937b40c16b3)
- Theme: [Hide context until clicked && add search icon · paviliondev/discourse-header-search-theme@2c62ed1 · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/2c62ed1fa151be8c5bd86d43e87121f61c11e195)
Note, the right alignment CSS has changed as a result, see the [first post](https://meta.discourse.org/t/header-search-plugin/36435) of this topic:
cc @terraboss @nawthor
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [January 8, 2018, 12:56pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/86 "2018-01-08T12:56:41Z")
Well done. The plugin looks much more intuitive.
I‘d like to share another idea:
(Only for desktop clients with mouse input): What if the search field will become visible, in case, the user hover over the search symbol? The search field plop out from the right side next to the original location. This would save space and is would make the UX much more responsive.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 9, 2018, 1:58am UTC](https://meta.discourse.org/t/header-search-plugin/36435/87 "2018-01-09T01:58:20Z")
> [@terraboss](#):
>
> What if the search field will become visible, in case, the user hover over the search symbol?
I’m not entirely sure I understand what you’re describing, but it sounds like you’re talking about hiding the search input in the header by default? This basically the normal Discourse search UI. No plugin required 🙂
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [January 9, 2018, 4:31pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/88 "2018-01-09T16:31:36Z")
Thanks a lot for the work on this. But I noticed a bug. If you enter a topic and scroll until the header search bar is replaced by the default search icon, the search drop-down has an unnecessary additional search icon inside:
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [January 10, 2018, 2:34am UTC](https://meta.discourse.org/t/header-search-plugin/36435/89 "2018-01-10T02:34:03Z")
Thanks, fixed: [Extend use of api && bugfix · paviliondev/discourse-header-search-theme@f7ce916 · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/f7ce916b66f5ab5ca3f4635222d29b590b02a28a)
---
### Author:  [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [February 3, 2018, 7:31pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/90 "2018-02-03T19:31:54Z")
that styling though… this is on the default theme.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 4, 2018, 11:58am UTC](https://meta.discourse.org/t/header-search-plugin/36435/91 "2018-02-04T11:58:39Z")
🙇♂️
Fixed:
- Theme: [Fix search icon height · paviliondev/discourse-header-search-theme@e5d5085 · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/e5d5085101d4edff0db1596966a3a52fde014e0e)
- Plugin: [Fix search icon height · angusmcleod/discourse-header-search@8bab1a4 · GitHub](https://github.com/angusmcleod/discourse-header-search/commit/8bab1a4e402c375423f75bedcb5af07155640c92)
---
### Author:  [@frold](https://meta.discourse.org/u/frold)
#### Post date: [February 13, 2018, 7:43pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/92 "2018-02-13T19:43:27Z")
Thanks for this plugin.
At my site I see a different layout in the search content
This is i the layout at at standard search bar inside a topic
This is when I use the plugin
Any reason why the result lists layout differ?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [February 14, 2018, 1:33am UTC](https://meta.discourse.org/t/header-search-plugin/36435/93 "2018-02-14T01:33:40Z")
Thanks for the feedback 🌞
By differ, do you mean:
- blue text colour of the titles;
- width reduction of the container (which makes more of the text wrap); and/or
- the context filter box appears in one screenshot but not in the other?
#### Width reduction
By default the header search input is thinner than normal Discourse search as there is less space in the header. You can change this on your instance if you wish.
All the header search size calculations, e.g. for the responsive break point (the point at which the search header is hidden because the screen is too thin), or the width of the results window, are ultimately derived from the width of the `.search-header` class, so you can safely make the search header wider just by increasing the width of that class.
i.e. Set the width of the `.search-header` class in Admin \> Customize \> CSS
```plaintext
.search-header {
width: /// your desired width - default is 350px
}
```
#### Topic title color
Personally I think the search results titles should be black as this it makes the `.search-highlight` of the search term easier to see.
There is a minor inconsistency with how topic title styles are treated in core Discourse. Compare, for instance, the topic titles in the lists in `/u/username/activity`. Some are black, some are blue. All lists of topics are links to topics, so I’m not sure the answer is that ‘links’ are blue (technically speaking this is actually the answer, i.e. an anchor tag (``) is being used, however this doesn’t solve the product-level inconsistency).
But this is minor point, and your implication is right that by default they should reflect the core style (made that [change](https://github.com/angusmcleod/discourse-header-search-theme/commit/11226046ef27ed8b6ba530a18c3a06779a7c5798)). If anyone wants to change this, just set this CSS rule to whatever you like
```plaintext
.header-search-enabled .search-header a, .header-search-enabled .search-header a:visited {
color: $tertiary;
}
```
#### Different context filters in the screenshots
Were those searches were made in different discovery contexts (i.e. when viewing different topic lists or topics)? The context filters seem to be working fine on my testing, e.g. (taken on my [sandbox](https://discourse.angusmcleod.com.au/c/events/l/calendar))
---
### Author:  [@frold](https://meta.discourse.org/u/frold)
#### Post date: [February 14, 2018, 7:48am UTC](https://meta.discourse.org/t/header-search-plugin/36435/94 "2018-02-14T07:48:05Z")
Thanks for a very loooooong description 🙂
Well yes, basicly my question was how to let the 2 search result list to have the same style/format.
I will look at the code snippets above!
But again a very nice plugin, thanks for the answer!!
---
### Author:  [@8BIT](https://meta.discourse.org/u/8BIT)
#### Post date: [March 9, 2018, 10:56pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/95 "2018-03-09T22:56:10Z")
just upgraded core:
and now header search looks like:
oh noes…
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [March 10, 2018, 1:07am UTC](https://meta.discourse.org/t/header-search-plugin/36435/96 "2018-03-10T01:07:28Z")
Thanks, fixed:
- Theme: [override new core style · paviliondev/discourse-header-search-theme@088b2b8 · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/088b2b882f03fc40abde8eb70faabf717fc925e8)
- Plugin: [override new core style · angusmcleod/discourse-header-search@39a2a52 · GitHub](https://github.com/angusmcleod/discourse-header-search/commit/39a2a526a4d710215b85c4dada2a52f4e0702fa1)
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [March 27, 2018, 6:18am UTC](https://meta.discourse.org/t/header-search-plugin/36435/97 "2018-03-27T06:18:56Z")
\*\* **Please note** \*\*\*
I am removing support for this plugin in favour of the [Header Search Theme](https://meta.discourse.org/t/header-search-theme/67959).
The functionality is exactly the same, but with the advantages of:
- No site stability risk.
- Themes now have setting support.
- Themes are easier to update, particularly now with the theme api.
- Any future header search functionality can be handled within a theme.
- It removes duplication, which is a source of engineering risk.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 27, 2018, 6:40am UTC](https://meta.discourse.org/t/header-search-plugin/36435/98 "2018-03-27T06:40:41Z")
I am moving this to #plugin:broken-plugin for now, I know it is not stricly broken but its better to move it now than forget about it and move it later.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 18, 2024, 3:48pm UTC](https://meta.discourse.org/t/header-search-plugin/36435/99 "2024-06-18T15:48:13Z")
[Previous page](https://meta.discourse.org/t/header-search-plugin/36435.md?page=4)