# Pavilion Header Search Theme Component
**URL:** https://meta.discourse.org/t/pavilion-header-search-theme-component/67959
**Category:** Theme component
**Tags:** pavilion, broken
**Created:** [August 13, 2017, 9:43am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959 "2017-08-13T09:43:48Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [August 13, 2017, 9:43am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/1 "2017-08-13T09:43:48Z")
> ⚠ This theme component is no longer maintained. See [below](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/70) for more information
>
> Alternatives include [Advanced Header Search](https://meta.discourse.org/t/header-search/194093) and [Advanced Search Banner](https://meta.discourse.org/t/search-banner/122939)
Repository: [GitHub - paviliondev/discourse-header-search-theme · GitHub](https://github.com/angusmcleod/discourse-header-search-theme)
[Preview on Theme Creator](https://theme-creator.discourse.org/theme/awesomerobot/header-search)
This is a re-packaging of the [Header Search Plugin](https://meta.discourse.org/t/header-search-plugin/36435) so it can be used as a theme.
The functionality is the same as the plugin.
See further:
[https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/15043/16?u=angus](https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/15043/16)
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [August 13, 2017, 1:59pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/2 "2017-08-13T13:59:15Z")
Which version of Discourse supports this theme?
I’m still on v 1.9.0.beta4 and this theme does not work because of APIs (version not supported):
If it is your intention that this theme only works from v 1.9.0.beta5 and higher please add this info to the OP. 😉
BTW changing the script from `version='0.8.9'` to `version='0.8'` works, at least on beta 4.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [August 29, 2017, 11:41pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/3 "2017-08-29T23:41:59Z")
Hi @angus, I found out that my forum is not loaded on Internet Explorer (works with Firefox, Chrome Opera and Edge).
[
After a lot of rebuild](https://meta.discourse.org/t/discourse-signatures/42263/35) I found out that the problem seems to come from this theme.
When I disable it from my default theme the forum is loaded normally.
Does anyone who uses this theme can see if their site is loaded on IE, please?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [August 30, 2017, 12:07pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/4 "2017-08-30T12:07:04Z")
IE still doesn’t support `Object.keys`? Ok I’m downloading a few IE vms to do some more thorough testing…
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [August 30, 2017, 2:06pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/5 "2017-08-30T14:06:45Z")
@Trash @bombledmonk [Fixed](https://github.com/angusmcleod/discourse-header-search-theme/commit/0163c29e915a4b19927d3d0f12eed05f9a10075d) for IE 11 ☀
Note: To test Discourse on IE on Mac:
1. dl the relevant IE vm [here](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/).
2. Load vm into VirtualBox and start it.
3. Run Discourse at `localhost:3000` on the host (i.e. your normal browser).
4. Open IE in the virtual guest and navigate to `http://10.0.2.2:3000/` and your local instance will load.
There’s no need to edit the `C:\windows\system32\drivers\etc\hosts` file on the guest.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [August 30, 2017, 2:18pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/6 "2017-08-30T14:18:55Z")
Thank you master 😉, it works now on Windows.
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [October 31, 2017, 4:03pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/7 "2017-10-31T16:03:22Z")
I was wondering if it would be possible to make the search bar be on the right, beside the hamburger menu, instead of having it beside the icon?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [November 1, 2017, 7:48am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/8 "2017-11-01T07:48:29Z")
It’s not possible to use settings in a theme, so you will need to apply css via the site customizer or fork the theme. It should be doable with css. I can take a look at what css would be required on Sunday, unless you want to take a look sooner.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [November 22, 2017, 3:38am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/9 "2017-11-22T03:38:20Z")
A little late, but here’s the css if you want the search bar to appear on the right of the header instead of the left. Add it in Admin \> Customize.
```plaintext
.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;
}
.search-input {
float: right;
margin-left: 10px;
margin-right: 0;
}
.search-context {
padding-top: 5px;
float: right;
}
.results {
right: 0;
}
}
```
You’ll, need to update to the latest for it to work properly.
[https://github.com/angusmcleod/discourse-header-search-theme/commit/c65ee64071ef70c46654270bce7ff79bd2fc8850](https://github.com/angusmcleod/discourse-header-search-theme/commit/c65ee64071ef70c46654270bce7ff79bd2fc8850)
The same CSS will also work for the Header Search Plugin.
See e.g. [https://discourse.angusmcleod.com.au/](https://discourse.angusmcleod.com.au/)
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 22, 2017, 11:47am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/10 "2017-11-22T11:47:02Z")
@angus, the search icon is visible when you open the site (even if it does not work) and disappears when you open a topic or click on the search bar in the header.
I seem to remember that it also happened in the plugin and you had already made a fix.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [November 22, 2017, 2:01pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/11 "2017-11-22T14:01:51Z")
hm. I did apply the same fix to the theme at the time.
[https://github.com/angusmcleod/discourse-header-search-theme/commit/84d359276485110c53b3e5992526c36cfe8cb7f7](https://github.com/angusmcleod/discourse-header-search-theme/commit/84d359276485110c53b3e5992526c36cfe8cb7f7)
Are you sure your theme is up to date?
I’m using the theme in my [sandbox](https://discourse.angusmcleod.com.au/) and it seems to be working ok.
Does it always happen, or only sometimes?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 22, 2017, 2:05pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/12 "2017-11-22T14:05:57Z")
Oh damn, you are right.
I never remember that the themes should be updated manually…my bad 😳
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [November 25, 2017, 11:37am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/13 "2017-11-25T11:37:44Z")
If you have the header search bar up and slowly shrink the width of the browser, there will come a point where the hamburger menu is moved above the user avatar if the search bar is aligned right:
and the hamburger menu and user avatar is moved slightly down if the bar is in it’s default position:
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [November 25, 2017, 11:46pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/14 "2017-11-25T23:46:58Z")
The theme automatically hides the search bar when the header becomes too small to contain it + the logo + the right icons. I had to increase the absolute width of the search bar to properly handle right alignment which threw that calculation off. The search bar should now disappear and the search icon re-appear in that scenario.
[https://github.com/angusmcleod/discourse-header-search-theme/commit/22409b3eeb0c05473f688e42e4fc30ef2b59efab](https://github.com/angusmcleod/discourse-header-search-theme/commit/22409b3eeb0c05473f688e42e4fc30ef2b59efab)
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 3, 2017, 3:06am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/15 "2017-12-03T03:06:26Z")
I’ve tweaked the size calculation logic here so that you can arbitrarily set the width of the `header-search` using css and the show hide behaviour will respond accordingly. This helps those with wide site logos.
The default width of the `search-header` contains, which holds both the search input and the contextual search options, is `600px`.
This was an issue for sites with wide logos, as there wasn’t enough space to fit the element comfortably (particularly with the sign up / login buttons on the right).
Now you can add something like this to your custom css.
```plaintext
div.search-header {
width: 400px;
}
```
And that new size will be factored into the calculation that determines whether to show / hide the search input when the window is resized.
[https://github.com/angusmcleod/discourse-header-search-theme/commit/80b7d8ea8975c3eac26f8c6fa01fbe744a2c5b4a](https://github.com/angusmcleod/discourse-header-search-theme/commit/80b7d8ea8975c3eac26f8c6fa01fbe744a2c5b4a)
cc @pradeepkumar
---
### Author:  [@pradeepkumar](https://meta.discourse.org/u/pradeepkumar)
#### Post date: [December 3, 2017, 7:38am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/16 "2017-12-03T07:38:54Z")
Thank you so much @angus, works like a charm! 🙂
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [December 4, 2017, 10:14am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/17 "2017-12-04T10:14:15Z")
With the search bar aligned right, the hamburger and and user menu doesn’t connect to the icons:
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 4, 2017, 11:21am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/18 "2017-12-04T11:21:46Z")
Fixed: [Style tweaks · paviliondev/discourse-header-search-theme@ab51e85 · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/ab51e85c43a8990b8a58a80da49ca09d39ca807c)
I’ve made a slight change to the right alignment css, so please re-copy / paste that.
> [@Pavilion Header Search Theme Component](https://meta.discourse.org/t/header-search-theme/67959/9):
>
> A little late, but here’s the css if you want the search bar to appear on the right of the header instead of the left. Add it in Admin \> Customize. .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; } .search-input { float: right; margin-left: 10px; …
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [December 10, 2017, 9:28am UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/19 "2017-12-10T09:28:56Z")
When in a topic, scrolling down until the search icon appears, clicking it and scrolling back up will make it so that there are two search bars on the screen at the same time. (Some times there’s a delay before the header search bar appears)
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [December 10, 2017, 2:16pm UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/20 "2017-12-10T14:16:00Z")
I think I did that part of that intentionally, the idea being that if you have one search open already, it would be jarring to have the search input suddenly jump to the header if you happened to scroll up. But it seems to be working imperfectly. I’ll take a look tomorrow.
[Next page](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959.md?page=2)