Clicking on the search icon on small screen devices should expose the search bar in the main navbar

The original issue was about fixing the problem where the search bar or the search icon wasn't visible on certain screen sizes. Testing this again in Jul '20 it seems that this problem was resolved. So I went further and explored what Dennis also originally suggested:

Perhaps introduce the functionality to be able to click the search icon to expose the search bar for sm and xs breakpoints.

This would be more useful than redirecting the user to the generic search page, which does not have the same quick jump and autocompletion functionality.


Original issue description:

Summary

The search bar in the main navigation bar is not visible in the sm breakpoint.

Steps to reproduce

Resize the browser to the sm breakpoint, and observe that there is no search icon button nor search bar that can be interacted with.

What is the current bug behavior?

Search bar or button to search page is not available to the user in the sm breakpoint

What is the expected correct behavior?

Search bar should be usable in all breakpoints.

Relevant logs and/or screenshots

xs sm md
image image image

Possible fixes

Perhaps introduce the functionality to be able to click the search icon to expose the search bar for sm and xs breakpoints.

This would be more useful than redirecting the user to the generic search page, which does not have the same quick jump and autocompletion functionality.

Proposal

Figma specs (Free Figma account required)

320-575px

Menu collapsed Menu expanded Search box shown
1209 1207 1208

576-767px

Menu default Search box shown
576-01 576-02

768-991px

Menu default Search box shown
768-01 768-02

Prototype

Figma prototype

new-search-interaction

Edited Jul 09, 2020 by Matej Latin
Assignee Loading
Time tracking Loading