Header Search

[Discourse]

	Summary	Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-header-search
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Settings

Name	Description
extra search icons	Add extra icons to the search bar (for example to trigger an external search).
svg icons

Optionally show external search icons

Use the extra_search_icons to show additional icons in the search bar.

This setting supports the following params:

• prefix: the prefix to the search URL when clicking the respective icon
• icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
• target: optionally set to “_blank” to open the link in its own tab/window by default
• showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
• excludeFromCategories: category IDs where the given icon should not be shown

Credits

Thanks to @Johani for the search panel javascript code

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-12T21:32:41Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve just made an update to the component, this will make the default search icon appear on mobile:

UX: hide on mobile, show default icon (#7)

[miss]

This works fine now .

@JammyDodger

@awesomerobot

Thanks.

[alanost (Alan)]

Hello, first of all really good theme component. Works very well for me.
I have a small suggestion for improvement. The search bar should certainly not be displayed in a login-required forum, since it can not be used anyway.

[alanost (Alan)]

I would be very happy if someone can fix this bug. I know it doesn’t affect many, but I love this theme component and this problem keeps me from using it

[awesomerobot (Kris)]

I’ve just made an update that will hide the search bar from logged out users when login is required

UX: hide from logged out users when relevant

[awesomerobot (Kris)]

I’ve also added an update that uses the header colors (header primary and header background) for the input

UX: use header colors for search input, fix button

[nolo (Manuel)]

The component seems to disable the new header-sidebar-toggle.

[keegan (Keegan George)]

Thanks for identifying this @nolo!

I’ve just pushed out a fix

FIX: Sidebar toggle disappearing (#10)

[nolo (Manuel)]

Another small glitch I came across: I can use the default “/” shortcut to enter the search input field. But it won’t expand the drop-down showing results. I’d need to click in the input field manually for that to happen which makes the keyboard shortcut kind of useless.

[nolo (Manuel)]

Using the component disables the header-sidebar-toggle again. I guess it’s because the settings for the sidebar changed.

[jordan-vidrine]

This should be fixed with this latest PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

[ozkn (Mathx)]

@jordan-vidrine Hi, can i use this component as default in mobile header

[jordan-vidrine]

I had considered this before releasing, but there isn’t enough room in the mobile header for this to work properly.

[bquast (Bastiaan Quast)]

Thank you for the great component.

Is there a way to customize the color of the border of the search box?

For me it is kind of grey, I’d love for it to be #FFFFFF white

[jordan-vidrine]

You can customize this color by adding some css to a local theme-component if you have one you’ve created for adding custom css.

If you havent done this, visit /admin/customize/themes and click on components, then install.

When the modal pops up, select to Create New, then name your component. You will be taken to the component’s new page where you can select the theme to apply it to. You will want to apply it to the installed theme.

To add the css, click on Edit CSS/HTML and add the css to the common page and save.

You will want to do something like this:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}

[bquast (Bastiaan Quast)]

Thank you @jordan-vidrine for the detailed instructions.

I had recently already learned with help from other good people on this forum to add custom CSS.

[Canapin (Coin-coin le Canapin)]

This might be of some help for further modifications
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
It explains how to find which element to target with CSS.

[matenauta]

Can I remove that line and use media queries to disable it until 768px without breaking everything?

I like to remove the button (because we have chats and video there) on tablet and I see the search box fit’s really OK.

[volanar]

Everything is fine, but in the mobile version you need to switch to the standard search, because it looks terrible

vs