Header Search Theme Component

Testing this theme component now and I see that once a search is executed the top of the results are getting cut off, whole element is getting shifted up or something. Anyone else seeing this?

It seems to happen even when I switch to a default theme…but @angus I don’t see this active in your sandbox at the moment so not 100% sure if it’s a bug or something weird with my setup.

1 Like

We don’t have space for a search bar on mobile. Has anyone ever seen a search bar integrated into the forum itself, rather than the header? I guess it could also be a footer search bar

Have you looked at this component?


thats exactly what i’m looking for. thank you @Johani.

We’ll modify it to work on tag-pages, which is the same for pretty much every plugin right now.


I noticed this issue too, made a PR with some updates



Thanks! Merged :tada:


A nice setting would be to place it exactly in the center of the header :slight_smile:

1 Like

Hey @angus

are there any plans to update the theme component? In theme preview it seems to have some layout issues
I think it’s a great feature that animates user more to use search function more frequently.


I submitted this pr: FIX: deprecations for ember-cli by pfaffman · Pull Request #4 · angusmcleod/discourse-header-search-theme · GitHub

Hopefully it will serve as more than a notice that this deprecation exists. :man_shrugging:


I made a PR that fixes the layout issues.


What are the differences between this #theme-component and the one linked below?

1 Like

hey, for some reason, I’m not being successful with moving the search bar below my header. are there any suggestions? I’ve been trying to nest it within a div class that I created in the after header html




Thank you for the great component.

How can I change the color of the search box?

I’d like to make it white.

Thank you

I’m always pleasantly surprised to find that this component still basically works :slight_smile: I’ve made a few updates to bring this more up to date with the latest Discourse.

Not sure you’re using this component, but it you are add this to your theme CSS

title .search-header #search-term {
  background-color: pink;


Thank you! I checked Github, but could not find any new commits there yet.

Thanks for the tip on the color, I actual meant to say the color of the border of the search box (to white). Is there a way to also do this?

Screenshot from 2023-03-02 10-13-59

That means you’re not using this theme component :slight_smile: Share a link to the github repository you just checked.

1 Like

Could this component actually work with the keyboard shortcut for search (“/”)? Right now using the shortcut makes it switch back to the search icon and drop-down:

For reference, the official Header Search component has a slightly different glitch: it enters the search field when using the shortcut, but then only shows results after actually selecting the field with a mouse click:

So I wonder if there’s a way to make header search fully compatible with using the keyboard shortcut?

1 Like

Actually I believe your updates were to the theme, as in entire theme (note the name of the repo):

I was talking about the component: GitHub - discourse/discourse-header-search

It seems to have a different owner, I probably mixed things up, sorry

Yup, that’s right. That’s the repo associated with this topic, even if it’s not correctly named. See the OP

You want this one

1 Like

okay thank you, if this also a component, I can use it in conjunction with my theme. I’ll try this one out as well then. Thanks for your help.

Maybe you could update this in the OP to make clear its a component (maybe there are others like me that would avoid a theme, but like a component)