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.
Yup. Turns out thatâs the way it was originally designed. Just a small fix needed.
1 Like
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:
1 Like
Thereâs been some recent work on the 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 {
padding-top: 5px;
}
.results {
right: 0;
}
}
5 Likes
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?
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).
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.
4 Likes
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.
PM me with the details of how you added the button to the header and I can help you get the alignment right.
3 Likes
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
4 Likes
Thanks 
Iâve taken the opportunity to move the right alignment CSS into the theme and make right alignment a theme setting.
If you are using right alignment please remove the custom CSS you were using for this and just use the setting.
8 Likes
Both on Chrome and FF
5 Likes
Ok Iâm pretty sure Iâve got it right this time 
Thanks!
5 Likes
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
5 Likes
Itâs an issue with nested flexboxes.
9 Likes
I tried this new theme
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
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.
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.
5 Likes
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.
4 Likes
This should be fixed now
6 Likes
Yes, it is now showing correctly. Thanks!
3 Likes
