Navigation Page Indicator Fix

Problem

The navigation page indicators (active states) were not updating properly during Swup page transitions. The is-active class would be removed after internal page navigation.

Root Cause Analysis

The issue occurred because:

  1. Swup page transitions change the URL and DOM content
  2. The navigation active state detection logic needed to be more robust
  3. Timing issues between content replacement and navigation updates
  4. The navigation update function needed better URL path matching

Solutions Implemented

1. Enhanced Navigation Active State Detection

File: assets/js/swup-modern-clean.js

Improvements:

  • More comprehensive path matching logic
  • Multiple fallback detection methods:
    • Direct URL path matching
    • Meta tag category detection
    • Body class inspection
    • Page title analysis
  • Better logging for debugging
  • Handles trailing slashes and edge cases

2. Multiple Update Triggers

Added navigation updates at several points:

  • content:replace hook (immediate)
  • page:view hook (after content loaded)
  • Delayed fallback updates (50ms, 500ms)
  • Browser navigation events (popstate, hashchange)

3. Debug Tools Added

Global Functions Available:

  • debugNavigation() - Full diagnostic information
  • updateNavigation() - Manual navigation state update

Debug File Created: test-navigation-debug.html

  • Visual debug panel
  • Real-time navigation state checking
  • Console output capture
  • Manual testing tools

The navigation update now tries multiple methods to find the correct nav links:

  • href attribute contains section name
  • href attribute ends with section name
  • Link text matches section name
  • Absolute URL matching

Testing Instructions

Method 1: Browser Console

  1. Open your site in a browser
  2. Navigate between pages using Swup (internal links)
  3. Open developer console
  4. Run debugNavigation() to see detailed status
  5. Run updateNavigation() to manually force update

Method 2: Debug Panel

  1. Open test-navigation-debug.html in a separate tab
  2. Open your main site in another tab
  3. Navigate between pages on main site
  4. Use debug panel to check navigation states

Method 3: Console Monitoring

  1. Open developer console on your site
  2. Navigate between pages
  3. Watch for navigation update logs:
    • 🧭 ModernSwup: Updating navigation active states
    • ✅ Navigation update complete
    • Any error messages

Expected Behavior

  • Navigation links should show active state immediately after page transitions
  • Active states should persist during animations
  • Console should show successful navigation updates
  • Multiple fallback triggers ensure reliability

Troubleshooting

If Navigation Still Not Working:

  1. Check Console for Errors: 
    debugNavigation()
  2. Verify Swup Instance: 
    console.log(window.swupInstance)
  3. Manual Force Update: 
    updateNavigation()

  4. Check CSS Active Styles: Ensure .nav-link.is-active and .mobile-nav-link.is-active styles are defined

  5. Verify Link Structure: Navigation links should have href attributes that match the section paths

Files Modified

  • assets/js/swup-modern-clean.js - Main navigation logic
  • test-navigation-debug.html - Debug tools (new file)

Performance Impact

Minimal - navigation updates are lightweight DOM operations with intelligent timing to avoid conflicts with page transitions.