Search Popup on every page of the site

Design help Animations & Interactions
1

Hi everybody, I’m a German designer and pretty new to webflow. I need to implement a search solution for a client, who wants a search button in the top right which should trigger a search popup on every single page, including the dynamic ones made with the cms. Although for a simple popup, it should be an easy animation, I have two issues:

  1. the popup modal hides on page load, but although I think I did all the animations right, the show animation when clicking the search icon doesn’t work. After hours of searching forums and google, I give up and hope you guys can help me.

  2. how can I make this a recurring event on every page? The page load animation always triggers the current page.

Hope I could express the problem correctly.

It would be great if someone could help me on this one. Thanks a lot!

Alice

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

Search Pop Up Like This Forum
2

Your loupe icon is weirdly placed actually and the click on it doesn’t work. Your interaction works, but the icon, while visible, isn’t clickable.

What you shoudl do:

  1. delete the current search icon
  2. add a 4th link in the navbar, call it search, or give it width and height and add the loupe icon inside of it or as a background image
  3. give the interaction you’ve made to open the modal to this link

Like that, it works

Now for repeating the same on every page:

Find a way to have the modal inside of your navbar symbol, so it will work on every page

3

hi vincent, thanks a lot for your answer. The problem is that i also need the search icon to show on mobile next to the menu icon, so i cannot put it in the navlink holder as a fourth link. I’ve tried as a link block outside the navlink holder, and it doesn’t work.

4

update: i managed to make the search work, but I can’t figure out how i could put the modal wrapper in the navbar symbol, it just doesn’t work, because it has to cover the screen