Improve search bar UX - Make the search bar reappear

[Hbrezy]

Hi,

I have an app with over 250 rows, and I’ve noticed a usability issue: once the user scrolls down (e.g., past row 50), the search bar is no longer visible. This makes it difficult for users to quickly refine their search, impacting the overall experience.

I’d like to suggest implementing a common UX pattern—making the search bar reappear as soon as the user starts scrolling back up. This approach is widely used and greatly improves usability.

Let me know if this is something you can push.

Thanks!

[MazenAlharbi]

For now, u can use CSS for this specific problem.
Check this Topic:

Sticky search!

Here’s some styling to make the search box of a collection sticky. Be sure to name the class of the collection “sticky-search” so that it matches the CSS below: .sticky-search [class*="needs-search-only"] { position: sticky; top:0; z-index: 9999; backdrop-filter: blur(10px); padding: 0 0 10px 0; } [CleanShot 2025-01-21 at 22.33.34]

And Visit the CSS Library By LowCode Agency:
And search for: Sticky Search

CSS Library by LowCode Agency

[Hbrezy]

Thanks bro. Where d i rename the class of the collection?

is it here?

[Darren_Murphy]

On the right hand side, under Options.

[Hbrezy]

Hey thank for the support

I have added the css class name under options:

I have also added the css code in the appearance settings:

still nothing

[Darren_Murphy]

You need to toggle that “Preview custom CSS” button on.

[Hbrezy]

Damn no luck. Thanks anyway will see if i can hire someone.

[MazenAlharbi]

What exactly are u trying to build?

[Hbrezy]

Hey im trying to build a simple directory with 250+ items in a collection. However i can get the search bar to be sticky.

[Hbrezy]

Yes, exactly. Right now, in my collection of 250 items, when I scroll halfway down, I’m unable to use the search feature because I have to scroll all the way back to the top.