Skip to content

Add option to use a single header HTML structure for both desktop and mobile #4540

Description

@pirate-bot

Impact: 75 · Confidence: 95 · Complexity: 75

Description

Problem

The Neve Header Builder currently outputs separate HTML nodes for the desktop and mobile header views, hiding the inactive view via CSS. This creates duplicated HTML elements (logos, navigation menus, buttons) which inflates the DOM size, affects page weight, and can create duplicate accessibility text/links for screen readers.

Desired Behavior

Provide a Customizer setting (e.g., "Use desktop header layout on mobile") that allows users to render only a single set of header HTML. When enabled, the theme should rely purely on responsive CSS to handle the transition to mobile layout, eliminating the secondary mobile-specific HTML wrapper entirely. This should mirror the capability currently available in the Neve Footer Builder.

Acceptance Criteria

  • Add a toggle in the Header Builder settings to apply the desktop layout/HTML to mobile devices.
  • When enabled, the builder conditionally skips rendering the mobile header wrapper and outputs only one unified header structure.
  • Ensure mobile toggle/hamburger behaviors continue to function seamlessly when inheriting the desktop header HTML.
  • Maintain current separate-node rendering as the default to ensure backwards compatibility for existing sites.

Customer Context

An intermediate-level pro user is requesting a way to prevent duplicate header DOM nodes to optimize page performance and SEO/accessibility metrics. They note the footer builder already allows using one layout across devices and they desire the same functionality for the header builder to reduce DOM complexity.

Root Cause Analysis

The root cause is an architectural decision in Neve's Header Builder to render specific DOM structures for distinct device views (Desktop vs. Mobile) to allow full flexibility in building completely different headers per device. While this enables high customizability, it forces users with simpler header designs to carry the performance penalty and accessibility confusion of duplicated DOM elements that are simply display-toggled via CSS. The gap is the lack of a capability to opt out of this device-split rendering in favor of a single, purely CSS-responsive DOM tree.

Reasoning

The customer has identified a legitimate optimization gap in the Neve Header Builder. Rendering separate HTML branches for desktop and mobile increases DOM size and can cause duplicate accessibility text or navigation links. The request to optionally mirror the desktop header HTML on mobile—relying on responsive CSS instead of duplicated nodes—is well-reasoned and aligns with performance best practices.


Source: HelpScout #3383993106
Generated by feature-request-triage workflow (ID: feature-request-triage_6a5349954b5fe5.70064094)

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions