 |
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 theme-creator.discourse.org |
 |
Repository Link | https://github.com/discourse/discourse-header-search |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Thanks to @Johani for the search panel javascript code 
I’ve just made an update to the component, this will make the default search icon appear on mobile:
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.
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 
I’ve just made an update that will hide the search bar from logged out users when login is required
I’ve also added an update that uses the header colors (header primary and header background) for the input
The component seems to disable the new header-sidebar-toggle.
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.
Using the component disables the header-sidebar-toggle again. I guess it’s because the settings for the sidebar changed.
This should be fixed with this latest PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub
I had considered this before releasing, but there isn’t enough room in the mobile header for this to work properly.
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
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
}
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.
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.
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.
Everything is fine, but in the mobile version you need to switch to the standard search, because it looks terrible
vs
