🧪 Navigation Test Page

This page displays the test navigation without affecting any other page on the site.

What You’re Seeing

• Yellow “TEST NAV” badge → Confirms test navigation is active
• Header navigation → Desktop menu with dropdowns
• Mobile menu → Hamburger menu (resize browser to see)
• Sticky header → Scrolls with page

Test Checklist

Desktop Navigation

• Logo links to homepage
• “Lits Sur Mesure” dropdown appears on hover
• “Canapés Sur Mesure” dropdown appears on hover
• “À Propos” and “Contact” are simple links
• Utility links (Devis, Phone) are styled correctly
• Dropdown shows subtitles and highlights
• Hover states work smoothly

Mobile Navigation (< 768px)

• Hamburger icon appears
• Menu slides down when clicked
• Submenu items expand with “+”
• All links are accessible
• Close menu by clicking outside
• Utility links appear at bottom

Functionality

• All links go to correct URLs
• Sticky header stays at top on scroll
• No console errors
• Smooth animations
• Accessible via keyboard (Tab navigation)

Data Source

All navigation content comes from:

• Data: data/navigation-test.yaml
• i18n: i18n/fr-nav-test.yaml
• Template: layouts/partials/navigation/header-nav-test.html

These files are completely separate from your production navigation.

How to Modify

Change Menu Items

Edit data/navigation-test.yaml:

header:
  main:
    - id: lits
      label: "Lits Sur Mesure"
      dropdown:
        - label: "New Item Here"
          url: /new-item/

Change Text

Edit i18n/fr-nav-test.yaml:

nav:
  lits_sur_mesure: "New Text Here"

Change Styles

Edit the <style> block in header-nav-test.html

Notes for Testing

• Resize browser to see responsive behavior
• Test on real mobile device for touch interactions
• Check dropdown alignment on different screen sizes
• Verify all links work correctly

This test page is safe – It uses completely separate files from your production site.