hermes-config/skills/software-development/web-ui-repair/references/compact-header-pattern.md

Compact Nav-Bar Header Redesign — Session Reference

User Design Preferences (Ray)

• Minimal header — no logo, no title/subtitle section. Just the nav bar.
• Mobile page title — show the current page name centered on mobile between the hamburger and controls.
• Dark mode toggle + user menu — inline in the nav bar, right-aligned.
• Clean, readable colors — white/dark cards with colored accent borders, never colored-text-on-colored-bg.
• High contrast — bold dark text on light bg, bold light text on dark bg. No washed-out grays.
• Card depth — subtle gradient + noticeable border in light mode, not flat white.

Persistent UI Bugs Fixed This Session

Dropdown Clipped by Content Below

The user account dropdown appeared behind the "overdue tasks" cards on the dashboard.

Root cause: The outer header wrapper <div> had no position or z-index set. Even though the #user-dropdown had z-index: 10001, its parent wrapper was a sibling of the main content div in the DOM. Since main content comes after the header in DOM order, it painted on top. Additionally, the CSS variable --z-critical was used in #user-dropdown { z-index: var(--z-critical); } but never defined anywhere.

Fix (3 parts):

1. Added position: relative; z-index: 1000 to the outer header wrapper div (creates stacking context at body level)
2. Added :root { --z-critical: 999999; } to style.css
3. Added .user-menu-container { overflow: visible !important; position: relative !important; } to style.css
4. Removed overflow-hidden Tailwind class from .header-card elements on all 4 pages

Header HTML Template

<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="container mx-auto p-2 md:p-4">
        <div class="header-card text-white rounded-2xl shadow-lg overflow-hidden relative overflow-visible-important">
            <div class="bg-white/10" id="main-navigation">
                <div class="px-3 md:px-4 lg:px-6">
                    <div class="flex items-center justify-between py-2 md:py-2.5">
                        <!-- Left: Mobile Hamburger + Desktop Nav Links -->
                        <div class="flex items-center gap-0.5">
                            <button type="button" id="mobile-menu-btn" class="lg:hidden p-2 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-200 shadow-sm" aria-label="Toggle mobile menu">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                                </svg>
                            </button>
                            <div class="hidden lg:flex items-center gap-0.5">
                                <!-- Nav links here with active/inactive classes -->
                            </div>
                        </div>
                        <!-- Mobile Page Title -->
                        <span class="lg:hidden text-sm font-semibold text-white">Page Name</span>
                        <!-- Right: Controls -->
                        <div class="flex items-center gap-1.5 md:gap-2">
                            <div class="hidden sm:flex items-center gap-1.5 p-1.5 rounded-xl bg-white/10">
                                <span class="text-xs font-medium text-blue-100 whitespace-nowrap">Dark Mode</span>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="dark-mode-toggle">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            <div class="user-menu-container relative">
                                <!-- User menu button + dropdown -->
                            </div>
                        </div>
                    </div>
                    <!-- Mobile Navigation -->
                    <div id="mobile-navigation" class="lg:hidden hidden py-2 border-t border-white/20">
                        <div class="space-y-1">
                            <!-- Mobile nav links here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Key Pattern: Active Link Per Page

When constructing the header for each page, only ONE nav link should use the active style (bg-white/20 text-white shadow-sm). All others use inactive (text-blue-100 hover:...). This applies to both desktop and mobile nav link lists.

⚠️ Critical: Z-Index for Dropdown After Header Redesign

After removing the tall header section, the user account dropdown will likely appear behind page content. This must be fixed separately from the header HTML changes. The outer header wrapper needs:

<div class="bg-white dark:bg-gray-900 border-b ..." style="position: relative; z-index: 1000;">

Additionally:

• Remove overflow-hidden from the header-card class list (conflicts with dropdown overflow)
• Define :root { --z-critical: 999999; } in style.css if var(--z-critical) is referenced
• Ensure .user-menu-container { overflow: visible !important; } is in the CSS

See section 7 of the SKILL.md for the full diagnosis and fix checklist.

⚠️ Duplicate CSS Selectors

Some pages accumulated multiple .dashboard-card definitions in the same <style> block across different edit sessions. The LAST definition wins (same specificity), which can cause override confusion. After making structural changes, grep for duplicate class definitions in the page's inline CSS and consolidate.

Pages Converted This Session

All 4 pages at /mnt/media/Web App Builds/Website - -v17 - 8-9-25 - Copy/:

Page	File	Outer Wrapper	Mobile Title
Dashboard	index.html	Gradient	Dashboard
Repair Orders	repair-orders.html	White/dark solid	Repair Orders
Customers	customers.html	Gradient	Customers
Appointments	appointments.html	Gradient	Appointments

Key Pattern: Active Link Per Page

When constructing the header for each page, only ONE nav link should use the active style (bg-white/20 text-white shadow-sm). All others use inactive (text-blue-100 hover:...). This applies to both desktop and mobile nav link lists.