Mobile Search form – how it works and how it opens

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, to avoid displaying long search forms by default on small screens.

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 page load.

This means:

• The page must be opened directly on a real mobile device, or
• The browser width must be set under 768px before loading the page.

Why a black or empty mobile header can appear

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

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

This is not a theme bug. It is a caching behavior. What to check:

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

Mobile Search and Hero Media

When using a search form inside the header (Hero Media), the Mobile Search follows the same logic as the desktop search. This applies to any search form type configured in: Theme Options → Search → Advanced Search Form

Theme options – Search – Advanced Search Form

The search form can be displayed:

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

These behaviors 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 all steps above, temporarily disable caching or enable a separate mobile cache from your 3rd party plugin cache that you have active in your list of plugins, then clear cache from browser and reload the page directly on a mobile device.

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

Helpful reference

Advanced Search Display Options:
https://help.wpresidence.net/article/advanced-search-options/