Header / Nav Mockup · Rhinoplasty Section · Direction A — Terracotta
A procedure-specific Webflow Symbol applied to all pages under /rhinoplasty-surgery/*. Distinct from the global 8 West header — focused on rhinoplasty conversion with contextual CTAs and a rhinoplasty-only mega-menu.
Facial Plastic Surgery · Vancouver, BC
↑ Header shown in context above the rhinoplasty landing page hero
Webflow Implementation Strategy
Since 8 West is rebuilding section by section (starting with rhinoplasty), the header strategy uses two separate Webflow Symbols — one for the existing global site, one for each new section. This avoids touching the live site while enabling the new design system.
Symbol A — Global Header
Existing site — unchangedDesigned to serve the full 8 West service range. Broad, multi-category navigation.
Symbol B — Rhinoplasty Header
New section — Direction A design systemDesigned to serve one patient type — someone researching rhinoplasty. Every element drives toward the pre-assessment.
Page Load (0px)
Two-tier visible. Brand bar: stone/ivory bg. Section nav: navy bg, ivory text. Header floats over hero image with transparent-to-navy gradient.
Initial state — no interaction neededScrolling (>80px)
Brand bar hides (height → 0, opacity → 0). Section nav transitions to white bg, navy text, soft box-shadow. Terracotta CTA remains unchanged.
Webflow Scroll Interaction: 'While Page is Scrolling' → trigger at 80pxMega-menu Open
On hover (desktop): mega panel slides down from section nav. Terracotta top border. Two-column layout: description + link grid. Closes on mouse-leave or Escape.
Webflow Interaction: Hover on nav item → show/hide mega panelWhen the next section (e.g. Injectables, Facial Surgery) is rebuilt, a new Webflow Symbol is created using the same two-tier pattern. The brand bar and scroll behaviour are identical — only the section nav links and section label change.
/rhinoplasty-surgery/*
/facial-surgery/*
/skin-injectables/*
/health-optimization/*