How Mobile Search works

In WPResidence, the search behavior changes automatically on mobile devices.

On screen resolutions under 768px, the desktop header search is replaced by the Mobile Search. This is expected behavior and is built into the theme.

The Mobile Search is closed by default and opens only when the user taps it. This is intentional, so long search forms do not take too much space on small screens.

How Mobile Search opens

On mobile, the search form does not stay open by default.

The visitor must tap the mobile search bar or mobile search button to open the full form. This keeps the mobile header shorter and easier to use.

How Mobile Search is triggered

The Mobile Search is rendered only when the page loads on a screen smaller than 768px.

It does not dynamically switch after the page has already loaded.

This means:

• Open the page directly on a real mobile device, or
• Set the browser width under 768px before loading or refreshing the page.

Why the mobile header can appear empty or black

If the page was cached in desktop mode, the mobile header can appear empty, black, or incomplete.

This happens because the Mobile Search markup was not generated when the page was cached.

This is usually a caching issue, not a theme issue.

Check the following:

• Open the page directly on a real mobile device. Do not resize the browser after the page already loaded.
• Check the cache plugin and confirm it creates separate cache for Mobile and Desktop.
• If the same cache is used for both desktop and mobile, the mobile header can inherit a desktop cached version.
• Clear all cache layers after making changes:
  • cache plugin
  • server cache
  • CDN cache, if used
  • WPResidence theme cache, if enabled
  • browser cache
• Confirm that Advanced Search is enabled from Theme Options > Search > Advanced Search Display and not disabled by page-level settings.

Mobile Search and Hero Media

When using a search form inside the header or Hero Media area, the Mobile Search follows the same search configuration as the desktop search.

The search form fields are configured from:

Theme Options > Search > Advanced Search Form

https://help.wpresidence.net/article/advanced-search-form-theme-options/

The search form can be displayed:

• inside Hero Media
• as floating search
• as sticky search

These options are controlled from:

Theme Options > Search > Advanced Search Display

https://help.wpresidence.net/article/advanced-search-options/

For Mobile Search to render correctly, the header must be enabled.

The Hero Media option must be set to a valid header type, not NONE.

Header setup is controlled from:

Theme Options > Header > Global Header Options

https://help.wpresidence.net/article/global-header-options/

Final verification step

If the Mobile Search still appears empty or black after checking the settings, temporarily disable cache or enable a separate mobile cache from the third-party cache plugin active on the site.

Then clear browser cache and reload the page directly on a mobile device.

If the Mobile Search works correctly without cache, the issue is confirmed to be cache-related.

Related help

• Advanced Search Display Options
• Advanced Search Form Theme Options
• Global Header Options