How to personalize search element

Hi everyone,

I’m new to Webflow and I’m having a little trouble with the search element: I’d like to set up a search mode like in this website (top right corner), which means that I want only the pictogram to appear, and that when I click on it, the menu disappears.
I hope to be clear enough in my explanations.
Thanks in advance!

Howdy @JadeH and welcome to the community! :wave:

This is fairly straightforward to accomplish this with Interactions — basically clicking your icon would trigger an interaction that hides your menu and shows the search bar (with some transforms/fades for visual flair).

Thankfully Webflow offers some great content around learning platform in the Webflow University, so if you haven’t already I’d suggest running through the Interactions & Animations course:

They also have tons of articles on the specific aspects of interactions here that may be more desirable if you don’t want to run through the whole course above.

If you run into issues after taking a peek at the links above, don’t hesitate to reach out with your read-only link and I’d be happy to help answer any questions :+1:

1 Like

Hey @mikeyevin !

Thank you so much for your help, I was looking for this EXACT course. However, I feel like I’m doing something wrong, even after 2 hours of work I can’t find the problem.
Please find my read only link below. I know my site is very poorly done, I am trying to do my best but this is all new to me. I welcome any comments and/or suggestions for improvement!
Thanks again for your feedback! :smiling_face:

Jade’s website

After taking a quick peek, the first issue I’m noticing is that you’ve got both of your show/hide animations using initial states for elements. Try keeping these to limited to the first trigger since the result of that will be to showing/hiding elements that are set as initial states of the second.

Think of initial states as a way to override how the website looks in the Designer compared to how they look on the live website — so having something visible (like the search bar) is useful while working on a site in the Designer, but you’ll want this hidden initially so the user can toggle it with your interaction. If you’re trying to set initial states on the second trigger, it will may conflict with initial states on the first.

Another issue I’m noticing is how the elements are structured in your project. Right now your search bar is nested within your menu wrapper — but this requires you to selectively hide many elements within the interaction individually.

Instead, consider including it in a separate outer wrapper like below:

Navigation

Nav Wrapper

Nav Menu

Search

With the above structure, both your search and nav menu are self-contained but within a common wrapper. Your on-click interaction can now hide the nav menu and reveal the search in just two steps :wink:

Hopefully that helps but don’t help to reach out if you run into any other issues and I’ll see if I can take some extra time to walk through some solutions!

Thank you for your quick answer !
At first, I tried to remove the “set as initial state” option, but nothing changes. I think there is something I did wrong again, or didn’t see :sweat_smile:
Then I’m not sure I understood the wrapper (I’m still studying the site structures), was it supposed to look like this or did I get it all wrong?
Capture d’écran 2023-01-26 à 20.12.57

One more question, I wanted to separate each word of my nav menu, so I tried something and I just applied a margin on the right of each link, but I don’t like the rendering (I find the bar too big in height). Is there another way to do?
Anyway, thanks for taking the time to answer me, I hope I’m not bothering you too much. :grimacing:

Hello @JadeH

We’ve gone ahead and created a working example of how this animation can work. It’s a bit tricky in terms of placement but this way will guarantee that you won’t influence any other elements on the page other than the ones you want to.

In terms of height of the navbar you can control that by setting in the navigation as well as by controlling nav links, brand etc… If you have a more specific question in mind don’t hesitate to ask.

Cheers,
Flow Ninja Team!

Hey @marko-ninja !

Thank you very much for your precious help!

I have spent quite a bit of time trying to understand and copy several elements of the template you shared with me, unfortunately I am running into several problems that I can’t figure out.

  • the animation of my nav absolute line works, but just once, if we hover it a second time, it does not work anymore
  • I can’t find my Nav Menu Button… I feel like I lost it, but I don’t remember deleting it
  • The animation is not good, the search bar is visible from the beginning and the menu does not disappear completely etc. Moreover, I wanted to place the closer of the search bar at the same place as the button to open it, and now the magnifying glass sticks out.
  • I thought the nav container would expand if I enlarged my logo, unfortunately it doesn’t, and so the logo sticks out of the menu if I want to enlarge it.

Could you please give me a hand? it would be very useful for me, because I confess I have a lot of trouble to start with Webflow… :frowning_face:

Thanks in advance!

(This time, the nav bar I created on my website is on the second page named “espace entreprise”)

Hey @JadeH

For the nav absolute line in the second animation “Nav Button Hover Out” you add height 0% which is why your animation stops working after first hover, you can just disable that and it will work. Desired result will look something like this:

For the Nav Menu button you can just add a new nav to the page and copy it from there. You seem to have some unusual interaction on Nav Open and Nav Close so don’t alarmed if it works a bit unusual, you can disable the animation for now and create it later on.

As for the animation not being good, make sure that “search A” class is 100% width and not 99% width. After that also make sure that class “Nav Menu Organizer” has overflow:hidden

For the nav logo/container situation even though you are changing the height of “Nav Logo” class you are not setting your “Brand Logo Main” class properly. Make sure that you set it’s width and height 100% for Brand logo Main and then you can control the actual size with Nav Logo In pixels to what feels right. Another item you need to change is class “Navbar 5” from 96px height to auto height because if you lock it at 96 no matter what you do to elements inside it will still stay 96

Hope this helps, let me know how it went!

Cheers,
Flow Ninja Team!

1 Like

I think we did it @marko-ninja !

Tell me what you think, normally I don’t see any apparent problems. I hope I haven’t forgotten anything.
I really wanted to thank you, I couldn’t have done it without your help. :smiling_face:

Yay! I think we got it covered now. One thing I’d do is make sure that I’d do is make sure that everything fits properly on 992px width of the screen as that is the smallest desktop size. I’d recommend adding a line of custom CSS to target nav logo on smaller screens like this:

@media only screen and (max-width: 1100px) and (min-width: 992px)  {
.nav-logo{
width: 150px;
height: 60px;
}
}

You might need to tweek some other elements as well in order for everything to fit but this is the main idea as to how you’d do it. You can add this code into project settings before tag so that it gets applied to all pages.

1 Like