Skip to content

Fix mobile navigation hamburger menu overlay and animation

System625requested to merge
system625/paulina:fix/mobile-nav-hamburger-menu into main

Summary

Fixes mobile navigation hamburger menu behavior to overlay content instead of pushing it down, and adds animated transformation to X icon when menu is open.

Fixes: T410027

Changes Made

  • ✅ Mobile hamburger menu now overlays page content (no layout shift)
  • ✅ Hamburger icon animates to X icon when menu is open
  • ✅ Smooth CSS transitions (0.3s ease) for professional feel
  • ✅ Responsive language selector for mobile screens
  • ✅ Maintains all existing functionality

Testing

Tested on:

  • Mobile devices (< 992px viewport)
  • Chrome DevTools device emulation
  • Multiple screen sizes (iPhone SE, iPad, desktop)

Screenshots

Before

image

After

image

Test steps:

  1. Open Paulina on mobile viewport
  2. Click hamburger menu - verify it overlays content
  3. Verify icon animates to X when open
  4. Verify language selector is fully responsive
  5. Close menu - verify icon returns to hamburger

Merge request reports