Streaming live at 10am (PST)

Search Popup on every page of the site

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)

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

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.

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