A simple CSS demo that shows how to make a mobile-friendly navigation bar (placed at the top of the screen for mobile UX purposes) swap places with a desktop-friendly nav bar (placed underneath the header area).
Here is the overview:
- Nav is at top
- Nav is hidden by default
- Hambuger icon is visible
- Header is below the NAV
- Nav is stacked top-to-bottom
- Header is first
- Nav is below the header
- Nav is always visible
- Nav links are side-by-side