Slide Search Bar into view to below Nav Bar

Design help Animations & Interactions
1

Hi Guys, this is my first website on Webflow and would appreciate your help.

What I am trying to do:
The NavBar has a Search Icon (with search bar and button out of view), when clicked the search bar slides in from the top and the Nav Bar extends to accommodate the added search bar.
The second click will reverse the process and slide the Search Bar out of view and shrink the Nav Bar to its original size.

I have made an attempt to achieve the above, but have a problem

  1. In the designer, the search bar is not shown on the page - as it is meant to be, but when it is published, the page loads with the search bar in view (it should be out of view)

  2. The site is not hosted yet so I cant really test the search functionality, but would like to know how The search bar could be removed via animation when the user clicks the Search button?

  3. Is there a better way to create this animation? This is my first try and I am not sure if this is the optimum solution?

Please note that this animation is only applied to the test page - http://sba1.webflow.io/menu-test
(will replace the main nav when this works)

Thanks
Marius

Here is my public share link: LINK
(how to access public share link)

2

Hi @SmilingGoat

You might want to take a look @Aaron Grieve’s Digital Bake - where you can find a number of search bars for copy/paste or for simply looking at the settings and interactions used. Have a look at ‘search forms’ and ‘002’ is similar to what you are describing.

Hope that’s useful…

1 Like
3

Thank you for the tip @StuM
I have been able to resolve my own animation by studying @Aaron’s work

Also big thank you to @Aaron for making those components available at thedigitalbake.com