MenusLesson 12Free preview

Split Navigation

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Split Navigation Bar. In this layout, the main menu links are positioned on the left while the user action links such as the Login, Register, or Profile buttons are elegantly separated to the right side of the screen.

Key points

Separate a group of links left and right in a single navbar
Using the <div class="topnav-right"> wrapping with property float: right
It can be implemented in a modern way using the Flexbox with justify-content: space-between
Maintain visual consistency between user navigation and user account actions

Full lesson

Code examples and quizzes

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