XF 1.5 How to turn the search bar into an icon?

[Tim Jay]

I googled around a bit and really didn't find much info for this. It seems there are some custom themes out there that have an option to do this.

I was able to turn the Username, Inbox, and Alerts all into icons but I am having trouble implementing the same with the search bar.

If I can turn the search bar into in icon then I would move it next to the other icons to have something like this:

Anyone have any quick ideas for this?

 

[rainmotorsports]

Well it kinda already happens for mobile. So I would take those properties, style the icon how you want it and have it full time instead of only at responsive widths?

Perhaps it needs to be moved altogether since you want it inline.

 

[Tim Jay]

Well it kinda already happens for mobile. So I would take those properties, style the icon how you want it and have it full time instead of only at responsive widths?

Perhaps it needs to be moved altogether since you want it inline.

Thank you for that tip, the main change (once it's responsive) seems to be this:

#QuickSearchPlaceholder {display: block !important;}

I use that but the bar shows up with the icon:

EDIT:

this seems to do the trick:

#QuickSearchPlaceholder {display: block !important;}
#QuickSearch {display: none !important;}
#QuickSearch.show {display: block !important;}

Now I just need to adjust the position a little.