Navigation Bar Redesign

Rebuilt Molotov's navigation bar from scratch: separate mobile and desktop architectures, API-driven content, ARIA accessibility, and post-launch fixes that wiped out 50,000+ 404 errors from Google Search Console.

Tech Stack

ReactReact
TypeScriptTypeScript
Node.jsNode.js
CSS ModulesCSS Modules

Demo: Redesigned Navigation Bar in action

Key Highlights

  • Separate mobile and desktop navbar architectures, each optimized for its breakpoint's interaction patterns
  • Link obfuscation for anti-scraping compliance while keeping all navigation crawlable as static anchor tags
  • Custom scrollbar on the desktop megamenu handling deep category hierarchies without overflow issues
  • Signed-in and signed-out account states with seamless transitions driven by session state
  • CMS-driven navigation content via API: the content team can update menus without a deployment
  • Full ARIA roles, labels, and keyboard navigation for WCAG accessibility compliance

Architecture Overview

Mobile

Slide-out drawer with touch-optimized tap targets and collapsible sub-menus, built for one-handed navigation with no dependency on hover interactions.

Desktop

Full megamenu with custom scrollbar for deep category hierarchies, hover-activated dropdowns, and fixed positioning that stays correct as the page scrolls.

Auth States

Signed-in and signed-out views driven by session state, switching between login CTA, user avatar, and account menu without flicker or layout shift.

Dynamic Content

Menu items, featured categories, and promotional slots are all API-driven: the content team updates navigation without touching the codebase.

Critical Post-Launch Impact

Issues Resolved

  • 1Resolved 50,000+ 404 URLs by fixing the subscription button URL in the navigation
  • 2Ligue 1 logo 97% file size reduction (replacing oversized asset with optimized SVG)
  • 3Indéterminés category 301 redirect fixing broken classification pages

SEO Impact

The navigation rebuild had a measurable impact on Google Search Console health:

  • 50,000+ 404 errors resolved in Search Console
  • All navigation links now crawlable as static <a> tags
  • Category hierarchy fully discoverable by Googlebot

Outcomes & Results

  • 1

    Crawlable <a> links replaced JS-dependent navigation enabling full bot indexability

  • 2

    Eliminated 50,000+ 404 URLs through subscription button URL fix, a dramatic Search Console improvement

  • 3

    Improved accessibility scores with complete ARIA roles and keyboard navigation support

  • 4

    Ligue 1 logo 97% size reduction improving page payload and load time