FormsLesson 135Free preview

Input Field in Navbar

This lesson is part of How To · All levels

Summary

The input field in the navbar places the search or other input column directly within the navigation bar. Flexbox helps to organize logos, links, inputs, and buttons in one neat line. On a small screen, elements need to be wrapped or simplified so that navigation is not overwhelmed.

Key points

Navbar uses a flex display to align the elements.
The input is given a flexible size and min-width: 0 to shrink.
Labels can be hidden visually, but they still have to be there.
On a narrow screen, the input can be moved to a new line or hidden behind a button.
Make sure the input doesn't block the main navigation link.

Full lesson

Code examples and quizzes

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