Sticky search!

Community Resources
1

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

15 Likes
2

Great sticky solution to long lists!

3

Added to the library, thank you!

1 Like
4

Thank you.

5

Thanks for the demo Bob.

What eludes me at this point is the recipe for adding a css element using a AI component then updating the CSS class to apply the style to the component.

example:

  • I have a menu in a container
  • I prompted the component to create a class call “foobar”
  • When I inspect the container in the browser i see foobar listed as the last class in the div. cool
  • I then go into Glide CSS and add the class foobar and apply styles, like position: sticky background: red, etc.
  • There is no change to the behavior of the component on the page.

If there is a recipe for glide CSS noobs in a -“do this, then this, format: or even better a video” that would be great.

Thanks

6

Is this specifically referring to styling the AI component or any component?

7

The AI component.

I created a menu with a series of buttons using the AI component.

Unsure if assigning a class using a prompt is needed but all I want to do is make the menu sticky

8

AI components are iframes, just like the web embed. Basically a window to another webpage from your main page. You cannot target styles inside an iframe using Glide CSS externally.

If you want to target the entire AI component, you do that through the Options tab for the component and assign a class name. If you want to adjust anything internally inside the AI component, that would be entirely through prompts. Styling would be through prompt, sticky would be externally via the assigned class name on the component.

2 Likes
9

thanks for the guidance. I am figured it out - just needed the top 0; attribute

2 Likes
10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.