MenusLesson 54Free preview

Sticky Social Bar

This lesson is part of How To · All levels

Summary

A sticky social bar is a row of social media icons that remain visible on the side of the screen as users scroll through a page. Because the position is fixed, the bar doesn't move with the content. On a small screen, the bar is usually moved downward so as not to cover the reading area.

Key points

Position: fixed holding the bar in the same position as the page rolls.
Top: 50% with transform: translateY(-50%) centering the bar vertically.
The z-index keeps the bar above the rest of the content.
Media query can move the bar down on a narrow screen.
The aria-label attributes on each icon link help users to read the screen.

Full lesson

Code examples and quizzes

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