Search function does not work on mobile devices

In WordPress the name for a search field must be s. WordPress automatically performs a search on any request where s is present.

For some reason your theme has a separate search field named m that is displayed on mobile. This won’t do anything unless custom code is added to handle this. But that’s not necessary.

Additionally, both fields are inside a single <form> element, which means that whenever the form is submitted, both the s and m fields are submitted. This means that on mobile a search is going to be performed based on the desktop search field.

What you need to two separate <form> elements, one for desktop and one for mobile, and each should have its own s element:

<div class="col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
    <div class="row justify-content-end">
        <form class="row justify-content-end pc suche">
            <div class="col-lg-11 col-xl-11">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suchen"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
        <form class="justify-content-end mobile" method="get" action="<?php echo esc_url( home_url() ); ?>">
            <div class="col-auto">
                <table>
                    <tr>
                        <td>
                            <input class="form-control" placeholder="Suche" type="text" value="<?php echo esc_attr($s); ?>" name="s" />
                        </td>
                        <td>
                            <input class="btn btn-outline-search" type="submit" id="search_submit" value="Suche"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>

Also note the other changes I made:

  • I removed the id from the forms and inputs, since they would otherwise be duplicates, which is not allowed in HTML. You can add whatever IDs you like if you need them, as long as they’re unique.
  • I replaced $_SERVER['PHP_SELF']; with home_url(), which is the proper way to get the homepage URL in WordPress.
  • The code had esc_html() with a second parameter set to 1. This doesn’t do anything, so I removed it.
  • I replaced esc_html() with esc_attr(), as it’s more correct for escaping attributes.