MenusLesson 31Free preview

Fixed Menu

This lesson is part of How To · All levels

Summary

This lesson reviews the making of the Fixed Menu / Fixed Top Navbar. The navigation bar is locked at the top coordinates of the screen so that it does not shift as the user scrolls the long article pages.

Key points

Apply position: fixed; top: 0; width: 100% to the navigation bar
Set a high z-index so that the navbar is not covered by other page elements
Put padding-top on body elements of a high navbar size so that the initial content is not covered
Ensure navigation is always accessible at all times without requiring users to scroll back up

Full lesson

Code examples and quizzes

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