In this task we want you to build a quick-access UI for a site search embedded inside a navigation bar. In this problem we expect you to use your Bootstrap skills, more specifically the HTML part.
We’ve created some wireframes for a search UI that we’d like to have implemented in HTML and CSS. The goal is to recreate the wireframes utilizing Bootstrap v4.0 code and best practices.
This is the initial view of the search UI. The UI consists of a input box where the user can type their search embedded inside navigation bar located in the header of page header.
Think about how to structure the navbar so that the search input is available on all screen sizes.
When the user focuses the the search input the UI should expand to occupy the full amount of horizontal space available.
The preferred way to implement the expansion is to trigger it by hiding the additional navigation items using CSS only.
As the user types a grouped dropdown of highlighted matches is show to the user. This dropdown should overlap whatever content visible on the page but still be responsive for smaller screens.
Think about how your HTML is impacted by keyboard navigation if the user want’s to
tabto a search result.