I’m trying to create a search bar at the top of my site. So when someone clicks on the search icon, a window drops down or appears over the nav bar. Is this even possible? I’m still very new to webflow.
Here is my public share link: LINK
(how to access public share link)
Hello @creativeclicks,
what you are trying to accomplish is very possible on Webflow. There is a search box already built in Webflow you can find it under components, it is the search element.
Once you place this search element on your navabar you can animate to show or hide anytime your users click on your search icon. I hope this helps, let me know if you have any questions.
I see the search bar feature. I’m just not sure how to get it to animate. Can you guide me in the right direction?
@creativeclicks, ok so what you need to do is you have to place the search bar and place it and style it how ever you want. Once it looks like you want and is placed where you want you select Display: None. After that, you select you search icon, go to interactions, element trigger, on first click, create a new animation, change target to search bar, select hide/show, select block or flex, and that will make the search bar to show. Then, you create the on second click animation, and select the search bar to go back to display:none. I hope this helps, let me know if you any questions.
OH ok. Thank you. I will give that a try and report back on how it goes.
For some reason, when I target the search bar, it looses the tigger and opts out of the whole thing. For some reason, I struggle with interactions. LOL
Hello @creativeclicks,
I see you styled to search bar now, you did the hardest part already. Ok so I got an interaction to work, I don’t know if it is what you like but you can modify it however you prefer. I used hide/show on an element trigger. First select your search bar and select display: none, then go to your Nav bar and select the link block where you have your magnifying glass, then go to interactions and select element trigger (mouse click) on first click change the target to the search bar and do the following:
In the nav bar, I’m on the search icon and follow what your saying, but when I click on the “search bar” to change what I want to trigger, it leaves the Interaction and closes that window. How do I get it to stay open?
@creativeclicks, you have to right click on the element you have selected and it will give you the option to change target.
I’m feeling so stupid right now. When I right click on the magnifying glass, I don’t see that option.
Don’t feel stupid @creativeclicks, it is a bit counterintuitive, but so once you select the icon link block like you did in your interaction start a new timed animation and select hide and show
once your are on the animation timeline then you right click on the icon and change target
and then you select the search bar, but remember to mark your search bar display none so you make it show with the interaction. Let me know if you have more questions.
I FINALLY GOT IT! 
Thank you for your patience with me as I learn.
That is awesome at @creativeclicks, I’m glad I was able to help you. Take care
Ok. I have one last question (hopefully). I just noticed that the link isn’t working on the rest of my pages. I copied the “search bar” and duplicated it on every page but when I click on the magnifying glass, it doesn’t show up. The nav bar and search bar are both created as symbols.
Hello @creativeclicks,
Did you get it fix already? because I tested on your live site and it works. On the designers it is kind of weird because it works when you see the preview for the first time then it stops, then it gets fixed. It works on the live site though.
Oh. Well that makes sense and probably why I’ve had other issues. I normally check the live in the designer before publishing. It is working like you said tho. Thank you again. lol
