Hello,
How do I add a mobile search bar?
Hey progenki!
Please go to Appearance > Editor and open Header.php file and find
do_action('ava_after_main_menu');
and add following code right below it
echo get_search_form();
then add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (min-width: 767px) {
#top #searchform>div { display: none; }}
Regards,
Yigit
Thank you for the code. I tried it out.
The search bar appeared but on top of the logo.
I am using a child theme. I placed the header code in the adult theme and the style code in the child theme.
Could this be the cause?
Hey!
Can you post the link to your website where you made changes? Have you removed the code?
Cheers!
Yigit
I put it back up.
Progenki.com
Please let me know as soon as possible so I can take it down.
Thank you
Hey!
Add this on Quick CSS:
@media only screen and (min-width: 767px) {
#searchform {
display: none;
}
}
Use this to adjust the searchbar position:
@media only screen and (min-width: 767px) {
#top #searchform {
position: absolute;
top: 90px;
}
}
Best regards,
Ismael
Thanks for the help, however, I have two searchbars on the computer view. How Can I make this only appear on the mobile side?
Hi!
Please find “767px” in Ismael’s code and change it to 480px. So it should display only on smartphones
Regards,
Yigit
Thank you very much for all the help