Streaming live at 10am (PST)

Searchbar on the navbar

I need to have a searchbar on the navbar so that it behaves like this:

On desktop it is a regular searchbar (image 1). I can do it - no problems. But I don’t know how to make it work properly on smaller breakpoints. I need a search button on the right side of the navbar (see image 2). When I click the button it opens the search bar (image 3). I can’t figure out how to make it work this way.
I also need to place a “cancel” (arrow) button somwere in the searchbar, so that it could be closed (image 3).
Any ideas how to do it in Webflow?
Thank you!