# Floating search bar

**URL:** <https://community.glideapps.com/t/floating-search-bar/78943>\
**Category:** Ask for Help\
**Created:** [January 3, 2025, 10:06am UTC](https://community.glideapps.com/t/floating-search-bar/78943 "2025-01-03T10:06:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 3, 2025, 10:06am UTC](https://community.glideapps.com/t/floating-search-bar/78943/1 "2025-01-03T10:06:23Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/53a46e8b537d787a7db6199612b6a509160c5f02.jpeg)

Is there anyway that the search bar of the table will be floating while scrolling down not disappear like the image shown becasue it is hard for customers that we have to scroll back to the top to search.

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 3, 2025, 10:09am UTC](https://community.glideapps.com/t/floating-search-bar/78943/2 "2025-01-03T10:09:57Z")

</div>

I think that we have to use CSS can anyone demonstrate please?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 1:12pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/3 "2025-01-03T13:12:02Z")

</div>

I would have to use your classes, but you need to add a custom CSS class to the collection. Then, use dev tool and CTRL+SHIFT+C (windows) to find the search bar element. Use the selector to set the position to sticky. Add a top: whatever you want, and a left or right too.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 1:13pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/4 "2025-01-03T13:13:05Z")

</div>

The search bar can even be at the same position, but when you start scrolling, it can be fixed to the screen with the sticky position.

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 3, 2025, 2:09pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/5 "2025-01-03T14:09:18Z")

</div>

Could you help me with the CSS? I am not good with it.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c81c37b7b85566515ddedb442b359e145329699.png)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 2:29pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/6 "2025-01-03T14:29:27Z")

</div>

Of course give me a few minutes

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 3:37pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/7 "2025-01-03T15:37:20Z")

</div>

You want it on mobile too right?

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 3, 2025, 3:50pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/8 "2025-01-03T15:50:23Z")

</div>

Yes, please.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 3:50pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/9 "2025-01-03T15:50:50Z")

</div>

Got it! Give me more time please

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 4:16pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/10 "2025-01-03T16:16:46Z")

</div>

I was able to do it on mobile, but not on pc yet.

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 3, 2025, 4:30pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/11 "2025-01-03T16:30:18Z")

</div>

It’s ok for just mobile. Thank you.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 5:50pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/12 "2025-01-03T17:50:41Z")

</div>

Add `floating-search-bar` as custom CSS class in the collection.

Here is the CSS for both Desktop and Mobile view :

```css
div:has(> label > input+button.clear-search-button) {
	position: fixed;
}

div:has(>.floating-search-bar) {
	overflow: auto;
	height: calc(100% - 99999px);
	margin-top: 0;
}

#main-root:not(:has(>div.is-mobile)) .floating-search-bar>div>div>div>div>div:first-child {
	position: sticky;
	top: 16px;
	z-index: 100;
}

#nav-root>div::after {
	content: var(--tw-content);
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#nav-root>div span {
	--tw-translate-y: 0px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	opacity: 1;
}

#main-root div:has(>h2) {
	display: none;
}

```

Here is what it looks like:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/6/663b5c04ed7c76b58f5831f4ca9c90c2fed103f8.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3fdc36636b656a2ab0ff09fbb5c5037ff27d776f.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fd5020a45c7e54cfc116592151e649d1c1540ab3.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/91d77facf56fda91cf499e88c3d546fcfa6adc89.png)

Sorry for the delay!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 3, 2025, 5:54pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/13 "2025-01-03T17:54:49Z")

</div>

> [@MaximeBaker](#):
>
> Add `floating-search-bar` as custom CSS class in the collection.

Forgot to tell you to add this.  
Post edited!

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 4, 2025, 2:47am UTC](https://community.glideapps.com/t/floating-search-bar/78943/14 "2025-01-04T02:47:43Z")

</div>

Thank you man. You are the best. Could you help a little more. It seems to be an overlap between the search box with pictures and texts in mobile as an image attached

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/b/1b43491e20295c9679b9265c612bf8a6eff25d4c.png)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 4, 2025, 2:53am UTC](https://community.glideapps.com/t/floating-search-bar/78943/15 "2025-01-04T02:53:13Z")

</div>

Just to test something, can you remove the in-app filters?

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 9, 2025, 9:00am UTC](https://community.glideapps.com/t/floating-search-bar/78943/16 "2025-01-09T09:00:23Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59a5e4da11173df529c9c316607512b6840e60a0.png)

It still overlaps.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 9, 2025, 11:34am UTC](https://community.glideapps.com/t/floating-search-bar/78943/17 "2025-01-09T11:34:36Z")

</div>

What os happening on the desktop version?

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 9, 2025, 12:00pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/18 "2025-01-09T12:00:44Z")

</div>

> [@MaximeBaker](#):
>
> What os happening on the desktop version

 ![S__53010638](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/6/f69e425cb2fc2ee45366a549755a7c6b6589232d.jpeg)

I’m not sure. I tried it in my phone. It also overlaps.  
Please help.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [January 9, 2025, 1:04pm UTC](https://community.glideapps.com/t/floating-search-bar/78943/19 "2025-01-09T13:04:26Z")

</div>

Do you have other custom CSS active right now ?

---

<div class="post-metadata">

**Author:** ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)\
**Post date:** [January 11, 2025, 5:01am UTC](https://community.glideapps.com/t/floating-search-bar/78943/20 "2025-01-11T05:01:20Z")

</div>

No, I don’t have other custom CSS

[Next page](https://community.glideapps.com/t/floating-search-bar/78943.md?page=2)