Mobile Navigation Footer Reference
This demonstrates a mobile app-style fixed navigation footer with:
- Height: 60px (same as header)
- Home Icon: Left side with background container
- Settings Icon: Right side with background container
- Center Navigation: Optional center icons for additional nav items
- Safe Area Support: Accounts for iPhone notch/home indicator
Navigation Specifications
- Background: Brand gradient (135deg, #667eea 0%, #764ba2 100%)
- Icon Containers: 44px with rounded corners (12px radius)
- Icon Size: 24px for primary actions
- Hover Effects: Subtle background change and scale
- Active State: Scale down on press
Mobile View Preview
App Content
This simulates how the navigation footer looks in a mobile app context.
The navigation stays fixed at the bottom while content scrolls.
Content Block 1
Content Block 2
Content Block 3
Scroll Test Section
This section demonstrates that the navigation footer stays fixed at the bottom while scrolling.