Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #210000


    How do I add a mobile search bar?

    • This topic was modified 8 years, 8 months ago by  progenki.

    Hey progenki!

    Please go to Appearance > Editor and open Header.php file and find


    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; }}



    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?



    Can you post the link to your website where you made changes? Have you removed the code?



    I put it back up.

    Please let me know as soon as possible so I can take it down.

    Thank you



    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,


    Thanks for the help, however, I have two searchbars on the computer view. How Can I make this only appear on the mobile side?



    Please find “767px” in Ismael’s code and change it to 480px. So it should display only on smartphones



    Thank you very much for all the help

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Mobile Search Bar’ is closed to new replies.