How to Webflow: Expanding and collapsing search bar - Tutorial (2019)

[@joshhighburger8869]

Such a simple and straightforward tutorial, packed with key info. One thing I enjoy about your tutorials often is regardless of the element/effect being taught, the way you teach it keeps the new knowledge open so we can apply it to an array of other effects or elements elsewhere in a project. Thanks for the knowledge, as always!

[@pixelgeek]

thank your so much for your kind words. I'm happy to help you grow your skills. Let me know what else you'd like to learn and I'll put it on my list :)

[@joshhighburger8869]

@@pixelgeek Always! Would be a heck of a tutorial/knowledge dump, but scroll-controlling the scrub of a video element based on page position, akin to how sometimes Apple does w/ new product pages, would be a huge one. I've seen a few forum posts on it, but my graphic design mind gets insta-intimidated almost every time I click a codepen/github link with tons of custom code...

[@loganscloset7498]

My friend continue with what you do. I started using webflow a week ago and watched two of your vids today, great bits of knowledge in there. Fantastic teacher mate

[@pixelgeek]

Awesome, thank you!

[@dudedamnit]

Working at 3am but I can always count with your content to solve some doubts!

[@donnam6952]

You have saved me so many times! Thank you for creating this tutorial. Soooo good!

[@oleww50]

Nelson just keeps on giving! Even from 2 or so years ago haha! Thanks again for the vid

[@pixelgeek]

you're welcome :)

[@creativereflux4336]

Keep it coming SIr! Thanks for being generous in sharing good stuff.

[@pixelgeek]

my pleasure 😁 i have lots more to share.

[@Kim-learns-to-fly]

So helpful and short and easy to follow along with. The explanations were also really helpful! Loved this tutorial.

[@MrJohntra]

Keep going and don't give up. You are great teacher.

[@pixelgeek]

Thanks for your support 🙏

[@walisonmartinsw]

Thank you! It was what I looking for!

[@JodiHumphreys]

Thank you, this was so helpful.

[@ЗероЭндорфин]

Thank you so much for doing what you do, Nelson! So great to become better in Webflow with your help!

[@pixelgeek]

thanks for watching! :D

[@gabrielatalitha]

Love this, thank you!

[@anushreyjain5338]

Thank You Sir. Please Keep it Coming.

[@eugenpett5108]

Thank you, very helpful!

[@pixelgeek]

You're welcome!

[@PcHabitat]

Great video man, so glad you're doing the videos. Can you do a video on layout best practices like order of elements on a homepage?

[@pixelgeek]

Will do 😁👍

[@hpantoja01]

Hi! Thanks for your content, I'm always looking forward for new videos to learn more, I trying this animation but the search bar doesn´t hide as initial state

[@kierrereeg]

Awesome video! 2 more video ideas for you, 1 how can we create spreadsheet style data in our sites that is interactive that works sort of like a google sheet, ie you can scroll left or right and maybe even fix a column or row, could we make it so they can move those columns or rows? Maybe this takes custom code but it would be really cool to see it done in webflow! 2 what about getting graphs into our sites? there are tons of people out there with analytical data who may want to use technology like webflow!

[@yaeleruv8425]

Hi :) so I'm trying to create a collapse expand interaction for a tab menu with an initial state of Icon only (collapse), and while hovering - expand (Icon + label), can I use this tutorial for that? thanks!!! :))) great tutorials!!!

[@xaviereveraert5756]

Hey! Thanks so much for that fasntastic video! I implemented it myself and it works great. However, when I scroll down and then press on the search button to open the search field, I always have to scroll back up to see the results. I tried to use position 'sticky', but then it stays up there. How could I piut position 'sticky' on ONLY the open state? Thanks again!!

[@rochbrz4105]

I'm having the same issue. Have you found a solution?

[@rodrigo.lamadrid]

Sooo helpful and straightforward! Thank you soo much for this amazing tutorial 🤗 EDIT: Just came up with a small problem though: Every time any page loads, the search bar shows up first than any other element, then disappears until I click on the magnifying glass button. Any tip on how to prevent the search bar from showing up until it's needed when loading the page?

[@betsaniacruzsalcedo]

Thank you!

[@seanreibling6783]

Love this! I've implemented something similar on my site. However, I'm wondering if there's a way to have the search bar "pre-focussed" when you click the nav menu search button. As in, the user clicks the search button on the nav bar, and when the drop-down comes in they can start typing right away (without having to click into the actual search bar)?

[@brendenanthony1058]

This was very helpful. How do I trigger this on just one page?

[@FYC-st6jy]

When creating the interaction and setting the height to zero for some reason Im still showing the top margins that I put on the search. I tried using a negative height but that didnt work so i just didnt use a background color so that those 10px just look like part of the screen thats already there- was I the only one? I will say I choose to have the search bar display below my nav bar rather than above it so Im not sure if that is why. Any ideas would be helpful in correcting that b/c I would like to have the background color be different but I know this is an older video so I'm not sure anyone will see this

[@sarahrain4371]

Hello Thank you for the amazing effort you're putting into the nocode community Such a simple tuo=torial however, I tried applying it, and the search bar & button sizes don't change (the content of the section don't change sizes), I tried changing from affecting only element to affecting children of the element, but it's the same result I don't know what i'm doing wrong

[@miltonsarkar5024]

Can the search result be generated when pressing enter from the keyboard

[@suzanne1797]

This is great, but it only works on the Home Page even though I added it to the Header symbol. Is there any documentation on how to fix this issue?

[@suzanne1797]

This doesn't appear to be responsive either. I checked the settings and everything is checked off for this to trigger in other screen sizes, however when I try to actually do that, it doesn't work. It is in the dropdown menu, but when I click, it just closes the menu. Would love further documentation to help with this. Thanks.

[@zeno4636]

thank you

[@loganshipley5237]

Hey there! can you only have one search trigger per site? I keep trying to set up multiple searches but after my first one all the triggers go wrong and none work, any advice?

[@pixelgeek]

Not sure what you mean. Can you make a video with loom.com to explain?

[@yuliaklimontova4760]

Is there a way to remove the button and perform a search by clicking Enter?

[@pixelgeek]

try setting your submit button ti display:none;. I think it'll still work :)

[@hosseinpouladrag7466]

God bless you.

[@angelotomandlandomigato]

My webflow doesn’t look like that

[@pixelgeek]

@@angelotomandlandomigato this is the old UI