Multi-Page Header Redesign — Replication Workflow

Pattern Summary

When the user picks a header design variant across all pages of a multi-page static web app, the changes fall into two layers: CSS and HTML. Replicate in order — CSS first (so the HTML has rules to reference), then HTML.

Layer 1: CSS Changes (apply to all pages)

1a. Change `.header-card` gradient

The header card uses background: linear-gradient(...) in a <style> block. Some pages have multiple .header-card definitions at different specificity points — update ALL of them.

1b. Replace `.nav-link` hover effect

The old shine effect (::before with horizontal gradient slide) is replaced with an underline indicator (::after with width transition):

.nav-link { position: relative; } /* remove overflow:hidden */
.nav-link::after {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: white; border-radius: 1px;
    transition: width 0.2s ease;
}
.nav-link:hover::after { width: 50%; }

1c. Active page class

.nav-link.active-page {
    color: white !important;
    font-weight: 600 !important;
    background: none !important;
    box-shadow: none !important;
}
.nav-link.active-page::after { width: 50%; }

1d. User avatar ring

.user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }

Layer 2: HTML Changes (per-page, adjust active link)

Replace the centered <div class="hidden lg:flex items-center gap-0.5 mx-auto"> with a w-full layout that has brand mark on left, nav links centered, user on right:

<div class="hidden lg:flex items-center gap-6 w-full">
    <!-- Brand (same on all pages) -->
    <a href="index.html" class="flex items-center gap-2.5 flex-shrink-0 group">
        <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center
                    group-hover:bg-white/15 transition-colors">
            <svg class="w-4 h-4 text-white/80" ...>gear icon</svg>
        </div>
        <span class="font-semibold text-sm text-white/90 tracking-tight">ShopProQuote</span>
    </a>
    
    <!-- Nav Links (active link changes per page) -->
    <div class="flex items-center gap-1 ml-auto mr-auto">
        <a href="page.html"
           class="nav-link active-page px-3 md:px-4 py-2 text-xs md:text-sm font-medium
                  text-white transition-all duration-200">
           ...
        </a>
        <!-- inactive links: text-white/60 hover:text-white -->
        <a href="other.html"
           class="nav-link px-3 md:px-4 py-2 text-xs md:text-sm font-medium
                  text-white/60 hover:text-white transition-all duration-200">
           ...
        </a>
    </div>
</div>

2b. User button

Replace the old button with a gradient avatar circle + ring:

<button id="user-menu-btn"
        class="flex items-center gap-2 p-1.5 pr-3 rounded-xl
               bg-white/8 hover:bg-white/12 transition-all duration-200 group">
    <div class="w-7 h-7 md:w-8 md:h-8 rounded-full user-avatar
                bg-gradient-to-br from-blue-400 to-blue-600
                flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
        <svg class="w-3.5 h-3.5" ...>person icon</svg>
    </div>
    <div class="hidden md:block text-left">
        <p id="user-email"
           class="text-xs font-medium text-white/90 truncate max-w-32"></p>
    </div>
    <svg class="w-3 h-3 text-white/40 group-hover:text-white/70 transition-colors" ...>
        chevron
    </svg>
</button>

2c. Mobile nav links

Update styling to match:

Inactive: text-white/60 hover:text-white hover:bg-white/8
Active: text-white font-semibold (no bg-white/20, no shadow-sm)
Container border: border-white/10 (was border-white/20)

Replication Order

Do one page first — typically the one the user is looking at
Verify — hard refresh, check desktop + mobile
Replicate CSS changes to other pages — same rules apply everywhere
Replicate HTML changes — adjust ONLY the active link for each page
Verify ALL pages — navigate between them to confirm each page's active link highlights correctly

Per-Page Active Link Table

Page file	Active link href	Active page name
`index.html`	`index.html`	Dashboard
`repair-orders.html`	`repair-orders.html`	Repair Orders
`appointments.html`	`appointments.html`	Appointments
`customers.html`	`customers.html`	Customers

The active link gets class="nav-link active-page ..." and text-white (not text-white/60). All others get text-white/60 hover:text-white.

Pitfalls

Multiple .header-card CSS definitions. Some pages define .header-card in 2-3 different <style> blocks within the same file. Update ALL of them — same specificity, later wins.
SVG formatting varies between pages. Some pages use multi-line SVGs, others use single-line. Match the exact whitespace when crafting patch strings.
Mobile nav active link also needs updating. Both desktop and mobile nav sections have their own copy of the nav links.
justify-between vs flex layout. Pages from different reference builds may use different flex layouts in the header row. Match the existing structure.
Brand mark is identical across all pages. The exact same HTML can be copied to each page — only the active nav link changes.
Test dark mode too. The CSS !important rules should override both light and dark variants of Tailwind classes.

5.6 KiB Raw Blame History