MenusLesson 56Free preview
Responsive Header
This lesson is part of How To · All levels
Summary
A responsive header is the top of a page that adjusts the layout of logos, menus, and action buttons to the width of the screen. On the desktop, the elements are usually horizontal; on the mobile phone, the layout changes to vertical or using a compact menu. Media query and flexbox became the main tools to organize these changes.
Key points
- Display: flex and justify-content: space-between separates logos, navigation, and action buttons.
- Media queries change the direction of the header's layout as the screen width shrinks.
- Flex-wrap: a wrap that prevents elements from overlapping.
- Text sizes can be made adaptive with clamp().
- A meta viewport must be in place to allow the query media to work at the width of the device.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.