MenusLesson 30Free preview

Equal Width Menu Links

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Navigation Bar with Perfect Average Menu Links. The entire menu button divides the total width of the navigation bar evenly and mathematically (e.g.: 4 links each occupy exactly 25% of the width of the screen).

Key points

Divide width 100% by the number of menu links (example: width: 25% for 4 menus)
Apply modern CSS Flexbox with flex: 1 to each child link
Using text-align: center for the center of the label text
Preventing the packaging of foreign text by box-sizing: border-box

Full lesson

Code examples and quizzes

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