MenusLesson 16Free preview

Fixed Sidebar

This lesson is part of How To · All levels

Summary

This lesson reviews the making of Fixed Sidebar. This sidebar component is permanently attached to the left side of the screen at a 100% viewpoint height so that it remains visible when visitors scroll through the main article content to the right.

Key points

Sidebar using position: fixed and height: 100% on the left side of the screen
Specifies the fixed width (e.g. 160px) and z-index to always be above the base content
The main content is given left margins equal to or greater than the width of the sidebar so that the text is not blank
Add overflow-x: hidden and overflow-y: auto if the list of sidebar menus is too long

Full lesson

Code examples and quizzes

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