MenusLesson 25Free preview

Bottom Navigation

This lesson is part of How To · All levels

Summary

This lesson reviews the making of the Bottom Navigation Bar. This component is permanently locked at the bottom of the screen using CSS position: fixed, making it the most popular thumb zone navigation pattern for mobile web applications.

Key points

Navigation locked at the bottom edge using position: fixed and bottom: 0
Set width to width: 100% and high z-index to always appear above the article
Position the vertical link with CSS Float or Flexbox
Put padding-bottom on the content body element so that the bottom text is not sealed navigation

Full lesson

Code examples and quizzes

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