Debugging an AI Loop:
The UXDW Divi Menu Investigation

The Request

A Simple Hover State

What began as a request for a modern navigation menu with a visible hover state quickly revealed something more significant — a debugging process that was generating code faster than it was generating understanding.

The site architecture introduced an immediate constraint. The homepage used a global header, while many internal pages used custom layouts without it. If the menu lived inside the header template, those pages would require manually duplicating the menu — creating maintenance problems and inconsistencies across the site.

To solve this, the team explored a custom HTML-based navigation menu that could be placed independently of the header structure. In theory, complete design control. In practice, a new set of problems — and the beginning of a loop.

The Problem

An Architecture Problem, Not a Styling Problem

The custom HTML menu repeatedly conflicted with Divi's layout system. Dropdown menus would render behind other elements or disappear entirely due to z-index conflicts. Attempts to position the menu above the header produced inconsistent results across pages and browsers.

These were not isolated incidents. They appeared consistently across configurations. It became clear the problem was not styling — it was structural.

Divi's Theme Builder imposes constraints that are not visible through its interface. Several behaviors encountered during testing are documented by other developers and remain unresolved within the platform.

After several iterations failed, the team returned to the native Divi menu module to guarantee baseline functionality — and used CSS to achieve the hover state. But the debugging process stalled again.

The Turning Point

Stopping the Loop

The debugging effort had turned into a loop. New code suggestions appeared constantly. Each one required clearing caches, refreshing the site, testing again — and each one failed to solve the underlying problem.

That was the moment Cara Harpole stopped the process.

That moment changed the direction of the investigation. Instead of treating code as the starting point, the team began treating the system itself as the problem to understand.

The Reset

Resetting the Debugging Process

From that point forward the investigation followed a new protocol. The shift was immediate and measurable.

Research revealed that several developers had documented limitations in Divi's navigation architecture — particularly within the Theme Builder environment. The z-index and layering conflicts were known behaviors. Understanding this reframed everything: what appeared to be a styling issue was a structural interaction between the menu module and Divi's header system.

The Panel

Collaborative Investigation

The investigation was conducted using a structured multi-AI panel — each platform assigned a distinct role based on its strengths. The combination of perspectives produced an outcome no single tool could have reached alone. What follows is an accurate account of who contributed what.

The Insight

Why Three AI Tools Saw It Differently

Once the investigation was complete, something interesting emerged. When the documentation structure was reviewed, each AI tool evaluated it through a completely different mental model — and each disagreed about what the Developer Guide should contain.

None of them were wrong. They were each optimizing for a different audience.

Cara Harpole synthesized the three perspectives into a three-document architecture — each serving one audience clearly:

This page — the investigation narrative for hiring managers and clients. Developer Guide — codebase-wide implementation reference. GitHub Protocol — deep technical documentation for Divi developers.

That structural decision is itself a demonstration of the work: recognizing that three conflicting recommendations weren't errors — they were correct answers to three different questions.

What It Produced

Lessons That Became Rules

• 01

  Diagnose the system before writing code

  Most debugging loops occur because solutions are attempted before the underlying architecture is understood. Research the platform constraints first. Every time.

• 02

  Simpler solutions are more stable

  Returning to the native Divi menu module eliminated every structural conflict introduced by the custom HTML approach. Complexity introduced the problem. Simplicity resolved it.

• 03

  AI works best as a debate panel, not a code generator

  The most valuable insights emerged once the investigation shifted from producing code to analyzing the problem collaboratively. Three mental models produced a better outcome than one.

• 04

  The fix is not done until it is documented

  A solution that lives only in someone's memory is a solution waiting to be lost. The working selectors, CSS patterns, and debugging protocol were documented so future development never repeats this cycle.