MenusLesson 29Free preview

Centered Menu Link

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Navigation Menu with a Centered Menu Link (Centered Menu Link / Centered Navbar). This pattern is often used to place the brand logo or main link right at the geometrical center point of the navigation bar with other menus clinging to the left and right.

Key points

Center the logo or menu link using position: absolute, left: 50%, and transform: translate(-50%)
Keeping the parent container position: relative
Implement modern CSS Flexbox with justify-content:center as a flexible alternative
Create elegant visual symmetry on an editorial or boutique style site

Full lesson

Code examples and quizzes

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