# How to Anchor Chat Element to Just Above Nav Menu

**URL:** <https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112>\
**Category:** Ask for Help\
**Created:** [May 28, 2025, 9:30pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112 "2025-05-28T21:30:25Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeramy\_Layton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeramy_layton/32/87901_2.png) [@Jeramy\_Layton](https://community.glideapps.com/u/Jeramy_Layton)\
**Post date:** [May 28, 2025, 9:30pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/1 "2025-05-28T21:30:25Z")

</div>

I have elements above my chat collection that I can’t remove, but they remove themselves after the two users form a chat pair. That is to say that, for the user, the UI looks clean, but for Glide, there’s more than one element on the screen, so the chat input in the chat collection doesn’t anchor to the bottom of the screen.

Is there no way to mimic it with CSS? This got me pretty close.

.message-box [class\*=“chat-input\_\_\_StyledForm”] {  
position: sticky;  
bottom: 110px;

}

.message-box [data-testid=“empty-comments”], .message-box [class\*=“comment-group\_\_\_StyledDiv-”]{  
min-height: 720px;  
}

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 29, 2025, 12:29am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/2 "2025-05-29T00:29:21Z")

</div>

Can you include some images of what you want to achieve?

---

<div class="post-metadata">

**Author:** ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)\
**Post date:** [May 29, 2025, 12:14pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/3 "2025-05-29T12:14:14Z")

</div>

I think they wanted to add other components other than the Chat component on a Chat screen (like a bar at the top showing who you’re chatting to) without losing the feature which makes the chat sticky if it’s the only component (Not sure how to explain well 😅)

---

<div class="post-metadata">

**Author:** ![Jeramy\_Layton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeramy_layton/32/87901_2.png) [@Jeramy\_Layton](https://community.glideapps.com/u/Jeramy_Layton)\
**Post date:** [May 29, 2025, 1:52pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/4 "2025-05-29T13:52:07Z")

</div>

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

In this image the chat component has a text field above that indicates what user the person is chatting with making it so the chat input bar floats in the middle of the screen.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/4/745f202b5ccb8be0d704b3ecb9418c58030a36c3.png)

As more text is entered, the chat input bar slides down the middle of the screen. I would really rather it stick to the top of the navigation menu.

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

Like so.

But it only sticks like that if it’s the ONLY element on the screen. It would be nice if there was a nav-menu stick option, but failing that I would like some ideas on what CSS to put here to get it to stick roughly around the

---

<div class="post-metadata">

**Author:** ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)\
**Post date:** [May 29, 2025, 1:57pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/5 "2025-05-29T13:57:14Z")

</div>

Instead of a text label you can just make the “Chat with \_” text as the title of the chat component to get the same text label up the top but it remains sticky. I do wish someone still made a solution though incase we wanted other components at the top 😅

---

<div class="post-metadata">

**Author:** ![Jeramy\_Layton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeramy_layton/32/87901_2.png) [@Jeramy\_Layton](https://community.glideapps.com/u/Jeramy_Layton)\
**Post date:** [May 29, 2025, 1:59pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/6 "2025-05-29T13:59:48Z")

</div>

Unfortunately that’s not an option. I use a chat request feature, so before a chat element is displayed, a popup of the user wishing to initiate a chat appears. If accepted, the chat element is revealed and the other elements disappear, and so all of those elements, even though they’re invisible, still disrupt the sticky behavior of the chat input bar. ☹

---

<div class="post-metadata">

**Author:** ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)\
**Post date:** [May 29, 2025, 2:06pm UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/7 "2025-05-29T14:06:12Z")

</div>

Oh yeah. Give us a solution then someoneeeeee!!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 30, 2025, 12:16am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/8 "2025-05-30T00:16:44Z")

</div>

I would rather use CSS to remove the native comment option, and then have a container with a text entry + submit button and stick it up top.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 30, 2025, 12:26am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/9 "2025-05-30T00:26:39Z")

</div>

![CleanShot 2025-05-30 at 07.26.15@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8da9484e4d83ce8e1225de06b681c9caeed9c1b.jpeg)

The chat element sticks to the bottom of the screen for me. Is it working like that for you?

---

<div class="post-metadata">

**Author:** ![Jeramy\_Layton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeramy_layton/32/87901_2.png) [@Jeramy\_Layton](https://community.glideapps.com/u/Jeramy_Layton)\
**Post date:** [May 30, 2025, 3:37am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/10 "2025-05-30T03:37:51Z")

</div>

If you add other elements onto the screen (even if they aren’t visible), then the chat input bar floats around the screen. It doesn’t stick to the bottom anymore. You should be able to see this by adding a piece of text above the chat collection.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 30, 2025, 3:40am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/11 "2025-05-30T03:40:36Z")

</div>

Is it only on the mobile version that this happens?

---

<div class="post-metadata">

**Author:** ![Jeramy\_Layton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeramy_layton/32/87901_2.png) [@Jeramy\_Layton](https://community.glideapps.com/u/Jeramy_Layton)\
**Post date:** [May 30, 2025, 3:52am UTC](https://community.glideapps.com/t/how-to-anchor-chat-element-to-just-above-nav-menu/82112/12 "2025-05-30T03:52:28Z")

</div>

Floats on tablet mode too.

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