Replace search-icon with search bar in the header

Hi,

I was wondering: is it possible to replace the search-icon (magnifying glass) in the header with the actual search bar that pops up after clicking on that icon? I would like to have a search bar on the top right of my header always displayed (not that people have to click on the icon first)

Thanks,
Bastian

Hi Bodgan,

thanks for your reply and sorry for my late response.

I located the search part in the header-menu.php. Is it possible for you to show me in your second screenshot, how I would replace the icon with the default wp search element using the do_shortcode function? I’m not familiar with coding I’m afraid, and I wouldn’t know what to do.

Also: Isn’t it also possible to simply use the code from the actual search bar from the newspaper theme somehow and replace it with the icon so we just get rid of the step “clicking the icon” ?

Thank you so much.

P.S. the website is http://www.bastian-weber.com (in case it helps)

• This reply was modified 9 years by BastianWeber.

Hey Bodgan,

thank you very much!! It worked!

I added some margin and padding values to the respective classes and in the desktop version it looks really good. However, as soon as I change the resolution it looks pretty weird. Is it possible to have the search bar always visible in the desktop and tablet version but change back to the search-icon in the mobile version?

Thanks!

Dear Team,

Not work for me > http://screencast.com/t/zPsacEO974KS
this is code i put > http://screencast.com/t/4Dta7GtDt

help

Thanks

Dear Team,

Not works,
no change, still as before

Thanks