1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by Tim Jay, Jun 2, 2016.

  1. Tim Jay

    Tim Jay Active Member

    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?
    Last edited: Jun 2, 2016
  2. rainmotorsports

    rainmotorsports Well-Known Member

    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 likes this.
  3. Tim Jay

    Tim Jay Active Member

    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:



    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.

Share This Page