# Pavilion Header Search Theme Component
**URL:** https://meta.discourse.org/t/pavilion-header-search-theme-component/67959
**Category:** Theme component
**Tags:** pavilion, broken
**Created:** [8월 13, 2017, 9:43오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959 "2017-08-13T09:43:48Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [12월 10, 2017, 7:53오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/21 "2017-12-10T19:53:04Z")
> [@angus](#):
>
> 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
The way I would expect it to work would be that the header search bar would be suppressed if the normal search bar was open.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [12월 11, 2017, 1:04오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/22 "2017-12-11T01:04:33Z")
Yup. Turns out that’s the way it was originally designed. Just a small fix needed.
[https://github.com/angusmcleod/discourse-header-search-theme/commit/5f9e3d3ebc5c79d6afe31e752026c47551831b92](https://github.com/angusmcleod/discourse-header-search-theme/commit/5f9e3d3ebc5c79d6afe31e752026c47551831b92)
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [3월 5, 2018, 5:22오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/23 "2018-03-05T17:22:26Z")
I recently encountered a problem that if the header search bar is aligned right, the hamburger and user menu move relative to the results dropdown:
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 6, 2018, 1:09오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/24 "2018-03-06T01:09:32Z")
There’s been some [recent work on the header scss](https://github.com/discourse/discourse/commits/master/app/assets/stylesheets/common/base/header.scss). This is an updated version of the right alignment scss customisation that will work.
```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 {
margin-right: 0;
}
.search-context {
padding-top: 5px;
}
.results {
right: 0;
}
}
```
---
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [3월 25, 2018, 6:40오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/25 "2018-03-25T18:40:38Z")
Great theme thank you.
When I am log in, it’s perfect (use the right aligment) :
But when I am log out, is it possible to move the bar in the left side of my “sign in” button? And also, it seems like the “log in” button is a little bit too high…
EDIT : i adjust the high of my button. For the search bar, I know that I have to write this :
```
.header-search-enabled .contents .search-header {
margin-right: 170px;
}
```
but how to display only for non-log in users?
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 27, 2018, 6:46오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/26 "2018-03-27T06:46:16Z")
Thanks for the report.
You just need the right alignment CSS I posted above. Don’t add any extra margins (that’s probably what’s causing the button overlap in that screenshot).
> [@Pavilion Header Search Theme Component](https://meta.discourse.org/t/header-search-theme/67959/24):
>
> There’s been some [recent work on the header scss](https://github.com/discourse/discourse/commits/master/app/assets/stylesheets/common/base/header.scss). This is an updated version of the right alignment scss customisation that will work. .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 { margin-right: 0; } .search-context { pad…
There was a slight issue with the flex-box alignment with the login / signup buttons in that right alignment CSS, which I’ve updated.
I tested the right alignment with the custom sign up text you’re using in the french locale on my [sandbox](https://discourse.angusmcleod.com.au/).
---
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [3월 27, 2018, 11:38오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/27 "2018-03-27T11:38:32Z")
Yes this is exactly what I wrote.
But it is a custom button. Maybe it doesn’t detect it. I have a SSO with Memberful and I had to add my button to the header.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 27, 2018, 10:54오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/28 "2018-03-27T22:54:47Z")
PM me with the details of how you added the button to the header and I can help you get the alignment right.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [3월 30, 2018, 5:13오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/29 "2018-03-30T17:13:07Z")
Hey @angus, also a small fix for those who use dark themes or non-white headers, thanks 😉
PS here the issue `.title .search-header => padding-top: 5px`
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 31, 2018, 6:24오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/30 "2018-03-31T06:24:14Z")
Thanks 👍
I’ve taken the opportunity to move the right alignment CSS into the theme and make right alignment a [theme setting](https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557).
[https://github.com/angusmcleod/discourse-header-search-theme/commit/8f8646a17274416fc6d852d1240cc99f47ae52ee](https://github.com/angusmcleod/discourse-header-search-theme/commit/8f8646a17274416fc6d852d1240cc99f47ae52ee)
If you are using right alignment please remove the custom CSS you were using for this and just use the setting.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [3월 31, 2018, 10:05오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/31 "2018-03-31T10:05:31Z")
Both on Chrome and FF
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 31, 2018, 11:03오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/32 "2018-03-31T11:03:39Z")
Ok I’m pretty sure I’ve got it right this time 😅 Thanks!
[https://github.com/angusmcleod/discourse-header-search-theme/commit/6171f30e37ad72dd1294743cf208d34f85824a03](https://github.com/angusmcleod/discourse-header-search-theme/commit/6171f30e37ad72dd1294743cf208d34f85824a03)
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [3월 31, 2018, 1:21오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/33 "2018-03-31T13:21:00Z")
Another alignment fix between the 2 elements:
Maybe you want add a `margin-top: .2em` to the `.header-search-enabled.align-right .contents .search-header` element
🤣
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [4월 1, 2018, 3:36오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/34 "2018-04-01T03:36:49Z")
👍 It’s an issue with nested flexboxes.
[Minor style tweaks · paviliondev/discourse-header-search-theme@3b2d66e · GitHub](https://github.com/angusmcleod/discourse-header-search-theme/commit/3b2d66e2d6490cf6aae568f1318bb63a31c7334c)
---
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [5월 23, 2018, 12:02오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/35 "2018-05-23T12:02:39Z")
I tried this new theme
> [@Discourse Button Styles](https://meta.discourse.org/t/discourse-button-styles/88154):
>
> This theme component includes basic settings for changing button colors without writing CSS. [Github repo](https://github.com/awesomerobot/discourse-button-styles): https://github.com/awesomerobot/discourse-button-styles Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles) What the settings look like: There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius): basic bu…
And because it is `.btn`, it affect the search button as well and it is not good looking
It won’t be bad if I could change also the typing section, but for now it is two different part. Would be great if I could do something like this
or this
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [5월 25, 2018, 12:29오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/36 "2018-05-25T00:29:17Z")
> [@Francois\_Douville](#):
>
> And because it is `.btn` , it affect the search button as well and it is not good looking
Well that’s not really the fault of this theme 🙂
You can apply some custom css on your site to exclude the search button from border-radius being applied by the Discourse Button Styles theme.
> [@Francois\_Douville](#):
>
> It won’t be bad if I could change also the typing section, but for now it is two different part. Would be great if I could do something like this
I’m not sure what you mean here? You can change the placeholder text of the search input in Customize \> Text. You can currently achieve the Unsplashed or Facebook look if you want. You just need to apply the right CSS.
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [12월 27, 2018, 11:02오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/37 "2018-12-27T11:02:14Z")
This seems to be broken after the latest updates. Rightmost icons appear a bit shifted to the top when “align right” is enabled, as shown in the screenshot.
> 
And when a search term is entered, search results appear shifted to the top.
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [1월 11, 2019, 5:14오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/38 "2019-01-11T05:14:02Z")
> [@ggurbet](#):
>
> This seems to be broken after the latest updates. Rightmost icons appear a bit shifted to the top when “align right” is enabled, as shown in the screenshot.
This should be fixed now 👍
[https://github.com/angusmcleod/discourse-header-search-theme/commit/d9d967ceee2f8daaca6f4ed4edc414e561287e4f](https://github.com/angusmcleod/discourse-header-search-theme/commit/d9d967ceee2f8daaca6f4ed4edc414e561287e4f)
---
### Author:  [@ggurbet](https://meta.discourse.org/u/ggurbet)
#### Post date: [1월 15, 2019, 7:47오후 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/39 "2019-01-15T19:47:00Z")
Yes, it is now showing correctly. Thanks!
---
### Author:  [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [3월 5, 2019, 10:34오전 UTC](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/40 "2019-03-05T10:34:01Z")
This happened some time ago, but I haven’t gotten around to reporting it until now.
[이전 페이지](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959.md?page=1)
[다음 페이지](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959.md?page=3)