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
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)
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?
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)