Header search plugin

(Angus McLeod) #1

** Please note ***

I am no longer supporting this plugin. Please use the Header Search Theme instead.

See further.

Repo: GitHub - angusmcleod/discourse-header-search: A Discourse plugin that makes the search bar visible in the header

Also available as a theme: Header Search Theme

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:

.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;

Header Search Theme
Material Design Stock Theme
Display long search bar on home page above the categories buttons
Help us test the new header code!
Help on putting an opened search box instead of a clickable icon?
Upgrade after problem
Adding search bar to "After Header" banner
How to develop custom themes

@angus nice! Just one issue: it did indeed affect mobile, causing formatting to mess up.

The culprit:

.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.

(Angus McLeod) #3

Ah! Indeed. I added that without checking it properly. Thanks, will fix.

(Angus McLeod) #4

@Joey_Tuan That should do the trick


@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. I’ll dig into the cause too.

Causes the chat pane to get stretched out super wide:


@angus it’s this line that caused the conflict:

.d-header .contents {
  min-width: 740px;

I removed it, and it seemed to not break the header search UI from what I can tell?

(Angus McLeod) #7

@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…

(Angus McLeod) #8

@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.

(Dan Claudiu Gavril) #9

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.

(Angus McLeod) #10

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.

(Dan Claudiu Gavril) #11

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 :frowning:

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


Update 2:
discourse (77242e4) - back to normal. Thanks @sam

(Angus McLeod) #12

@dcgavril You’re all good for now? Any other issues with this plugin?

(Dan Claudiu Gavril) #13

@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
As it’s going to affect the search bar placement.

Thank you all for the quick fix.

(Fred Vom Jupiter) #14

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

(Angus McLeod) #15

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.


(robby) #16

Can this plugin be installed if you hosted Discourse through a one-click install?

(Erlend Sogge Heggen) #17

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.


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 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, which seems to effect all ul elements, so I’m guessing it instead needs to specify the header search’s class or id only.

(Angus McLeod) #19

@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/header-search.scss at master · angusmcleod/discourse-header-search · GitHub

In other words, that CSS selector actually resolves to .header-search-contents .results ul.

(Kane York) #20

It’s changed, make a list surrounded by [poll].

- A banana charade
- Defensive egg fortress