Mobile header not showing – Desktop header works fine

Hello WoodMart Support,

I need help with setting up separate headers for desktop and mobile. The desktop header works, but the mobile header does not display at all.

**My setup:**

**1. Two headers created in Header Builder:**

– “Header Electronics” — for desktop (with desktop background image)
– “Mobile Header” — for mobile (with mobile background image)

**2. Visibility settings inside each header:**

– In “Header Electronics”: each row (Top bar / Main header / Header bottom) is set to “Hide on mobile devices”
– In “Mobile Header”: each row is set to “Hide on desktop”

**3. Theme Settings Presets:**

– Created a preset named “Mobile Header”
– Condition: Custom → Equals → Is mobile device
– Inside the preset: General → Layout → Header → selected “Mobile Header”
– Saved the preset

**4. Global default header:**

– Theme Settings → General → Layout → Header → “Header Electronics” (marked as default with star)

**5. Homepage settings (edited with Elementor):**

– Page Settings → Custom Header → set to **”None”** (not fixed to any specific header, so it should follow the theme default + presets)

**The result:**

– ✅ Desktop: “Header Electronics” displays correctly
– ❌ Mobile: No header displays at all (page starts directly from the slider)

**What I’ve already tried:**

– Cleared WordPress cache (WP Optimize)
– Cleared object cache (Redis)
– Cleared Cloudflare cache
– Tested on a real mobile device (not just browser dev tools)
– Confirmed “Mobile Header” preset is saved with condition “Is mobile device”
– Confirmed “Mobile Header” header has content (logo, menu, cart icon)

Could you please help me identify what’s wrong with my configuration? I followed the Presets method from your documentation, but the mobile header still doesn’t appear.

Attachments:

You must be logged in to view attached files.

Hello,

Thanks for the detailed report.

WoodMart Header Builder includes separate Desktop and Mobile layouts within the same header. Please edit your active “Header Electronics”header, switch to the Mobile layout using the responsive controls in Header Builder, and create/configure the mobile rows and elements there.

You do not need to assign a separate header through a device-based Theme Settings Preset. Please remove the mobile preset and avoid hiding all rows on mobile in the active header. Configure the desktop content in the Desktop layout and the mobile content in the Mobile layout instead. The mobile layout is used at widths of 1024 px and below.

After saving the header, clear all caches again and test on a mobile device.

If the header is still missing, please provide the page URL and temporary WordPress administrator access via the forum’s Private Content field.

Best Regards.

Thank you for the detailed instructions. I have one follow-up question:

In the Header Builder, when I switch between Desktop and Mobile layouts for the same header, the background image seems to be shared between both views. I need to use different background images for desktop and mobile (different dimensions/aspect ratios).

Is there a built-in way to set separate background images for desktop and mobile within the same header? If not, what is the recommended method to achieve this?

Thank you!

[Author]

Posts