Better Searchfield for mobile (also desktop?)

[Tobias]

Hi,

as I need more space in the header and the wide search field is just too wide, I am trying to make it just an icon.

I managed to edit the searchform.php, converted the search <button> to <span> and edited css:

 #mobile-header form.searchform {
	padding-left: 235px;
} 

So far so good, but the script for resizing the searchform of course makes it the normal size, after tapping out of the form.
I explained the differend states in the following image.

To get the whole idea, check here: http://tympanus.net/Tutorials/ExpandingSearchBar/

So.. wouldn’t this be even a needed update? I really need this, so if anyone could help me out, I really would appreciate this. Otherwise I have to put in something like the example above.

[Varun Dubey]

Hi @snikay, provide us the url where you have to implement it, are you trying to modify default WordPress search or Global BuddyPress Search plugin.
Regards
Varun Dubey