MenusLesson 18Free preview

Responsive Sidebar

This lesson is part of How To · All levels

Summary

This lesson reviews the making of a Responsive Sidebar. This component appears as a vertical fixed side bar on a wide desktop screen, and automatically switches to a stacked horizontal top menu bar when accessed via a small screen device or mobile phone.

Key points

Using a fixed position on a desktop with a certain width (e.g.: 200px)
Main page content is given a left margin of 200px for the wide screen
Apply CSS Media Queries (@media screen and (max-width: 700px))
On a small screen, the sidebar is changed to width: 100%, height: auto, and position: relative

Full lesson

Code examples and quizzes

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