MenusLesson 11Free preview

Responsive Topnav

This lesson is part of How To · All levels

Summary

This lesson reviews the making of the Responsive Topnav. On the desktop screen, the menu appears in a horizontal plane. When the screen narrows down, the menu folds into a single row with the hamburger icon button in the right corner that can be clicked to open the downlink.

Key points

Embed the hidden hamburger icon button on the screen using CSS Media Queries
Add a class .responsive to the topnav element using JavaScript when the icon is clicked
Change the orientation of the link from a horizontal float to a vertical stack on the screen of the mobile phone
Apply @media screen and (max-width: 600px) to the breakpoint of mobile devices

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.