# Advanced Header Search
**URL:** https://meta.discourse.org/t/advanced-header-search/194093
**Category:** Theme component
**Tags:** official, header-search
**Created:** [June 16, 2021, 6:03pm UTC](https://meta.discourse.org/t/advanced-header-search/194093 "2021-06-16T18:03:28Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [June 16, 2021, 6:03pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/1 "2021-06-16T18:03:28Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Advanced 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](https://discourse.theme-creator.io/theme/Discourse/header-search) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-header-search](https://github.com/discourse/discourse-header-search) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > 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**](https://meta.discourse.org/new-topic?category_id=6&tags=header-search "Ask for support on configuring and using Advanced Header Search") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=header-search "A bug report means something is broken, preventing normal/typical use of the theme component") [👀 **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=header-search "Discussion about the user interface of Advanced Header Search, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=header-search "Discussion about how existing Advanced Header Search features can be improved or enhanced, and how proposed new features could work")
> ### ❕Note
>
> This theme component is only required when sites want to support external searches. Otherwise, you may update the **Search experience** setting to `Search field in site header` to move site search to the header.
### 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 👍
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @lindsey 2025-02-28T14:39:07Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 25, 2022, 3:03pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/17 "2022-07-25T15:03:38Z")
I’ve just made an update to the component, this will make the default search icon appear on mobile:
[https://github.com/discourse/discourse-header-search/commit/fb0969b04e564805ad2832bfa70e5ecdcb62daef](https://github.com/discourse/discourse-header-search/commit/fb0969b04e564805ad2832bfa70e5ecdcb62daef)
---
### Author:  [@miss](https://meta.discourse.org/u/miss)
#### Post date: [July 25, 2022, 3:15pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/18 "2022-07-25T15:15:08Z")
This works fine now .
😘 @JammyDodger
😘 @awesomerobot
Thanks.
---
### Author:  [@alanost](https://meta.discourse.org/u/alanost)
#### Post date: [July 28, 2022, 3:40pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/20 "2022-07-28T15:40:04Z")
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.
---
### Author:  [@alanost](https://meta.discourse.org/u/alanost)
#### Post date: [August 23, 2022, 9:37pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/21 "2022-08-23T21:37:03Z")
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 😢
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 24, 2022, 1:15am UTC](https://meta.discourse.org/t/advanced-header-search/194093/22 "2022-08-24T01:15:17Z")
I’ve just made an update that will hide the search bar from logged out users when login is required
[https://github.com/discourse/discourse-header-search/pull/8](https://github.com/discourse/discourse-header-search/pull/8)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 24, 2022, 12:46pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/23 "2022-08-24T12:46:51Z")
I’ve also added an update that uses the header colors (header primary and header background) for the input
[https://github.com/discourse/discourse-header-search/pull/9](https://github.com/discourse/discourse-header-search/pull/9)
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [October 10, 2022, 9:05pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/24 "2022-10-10T21:05:52Z")
The component seems to disable the new header-sidebar-toggle.
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [October 12, 2022, 4:46pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/26 "2022-10-12T16:46:20Z")
Thanks for identifying this @manuel!
I’ve just pushed out a fix 🎉
[https://github.com/discourse/discourse-header-search/commit/637b21e351bca7c134ef1f58b3d59e87fef93f34](https://github.com/discourse/discourse-header-search/commit/637b21e351bca7c134ef1f58b3d59e87fef93f34)
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [October 27, 2022, 6:21pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/27 "2022-10-27T18:21:51Z")
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [December 20, 2022, 8:52pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/28 "2022-12-20T20:52:34Z")
Using the component disables the header-sidebar-toggle again. I guess it’s because the settings for the sidebar changed.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [December 21, 2022, 9:49pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/29 "2022-12-21T21:49:06Z")
This should be fixed with this latest PR [https://github.com/discourse/discourse-header-search/pull/12](https://github.com/discourse/discourse-header-search/pull/12)
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [December 31, 2022, 10:17pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/30 "2022-12-31T22:17:58Z")
@jordan.vidrine Hi, can i use this component as default in mobile header
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 2, 2023, 2:08pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/31 "2023-01-02T14:08:52Z")
I had considered this before releasing, but there isn’t enough room in the mobile header for this to work properly.
---
### Author:  [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [March 2, 2023, 1:26pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/32 "2023-03-02T13:26:08Z")
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
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [March 2, 2023, 4:40pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/33 "2023-03-02T16:40:37Z")
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:
```css
.search-menu .search-input {
border: 1px solid #FFFFFF
}
```
---
### Author:  [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [March 6, 2023, 5:04am UTC](https://meta.discourse.org/t/advanced-header-search/194093/34 "2023-03-06T05:04:24Z")
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 6, 2023, 10:53am UTC](https://meta.discourse.org/t/advanced-header-search/194093/35 "2023-03-06T10:53:14Z")
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](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.
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [April 18, 2023, 1:22am UTC](https://meta.discourse.org/t/advanced-header-search/194093/36 "2023-04-18T01:22:22Z")
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.
---
### Author:  [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [July 13, 2023, 4:25pm UTC](https://meta.discourse.org/t/advanced-header-search/194093/37 "2023-07-13T16:25:49Z")
Everything is fine, but in the mobile version you need to switch to the standard search, because it looks terrible
vs
[Next page](https://meta.discourse.org/t/advanced-header-search/194093.md?page=2)