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)
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)
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 إعجابات
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 إعجابات
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 إعجابات
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 إعجابات
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 إعجابات
Both on Chrome and FF
5 إعجابات
Ok I’m pretty sure I’ve got it right this time 
Thanks!
5 إعجابات
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 إعجابات
It’s an issue with nested flexboxes.
9 إعجابات
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 إعجابات
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 إعجابات
This should be fixed now 
6 إعجابات
Yes, it is now showing correctly. Thanks!
3 إعجابات
