# 🗺 Build Better Navigation

**URL:** <https://community.glideapps.com/t/build-better-navigation/42201>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [May 20, 2022, 10:29am UTC](https://community.glideapps.com/t/build-better-navigation/42201 "2022-05-20T10:29:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 20, 2022, 10:29am UTC](https://community.glideapps.com/t/build-better-navigation/42201/1 "2022-05-20T10:29:22Z")

</div>

## Back to basics with a few tricks along the way.

Here are my Top 7 Navigation Methods, Tips and Tricks

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/a/aad971fbe06dd4d4082eadcafb3c846d7cad8d44.jpeg "Glide: Top 7 Navigation Methods, Tips and Tricks") ](https://www.youtube.com/watch?v=0xU8Z0XGaLk)

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 20, 2022, 1:37pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/2 "2022-05-20T13:37:55Z")

</div>

Nice clean video, Robert! Didn’t want to watch when I saw it was 25 minutes, but you kept my attention.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 20, 2022, 2:58pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/3 "2022-05-20T14:58:32Z")

</div>

Awesome…ya, I try to keep my videos as comprehensive as possible, but I should probably release some shorter content as well. At the very least, I include timestamps in the description.

---

<div class="post-metadata">

**Author:** ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)\
**Post date:** [May 20, 2022, 3:00pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/4 "2022-05-20T15:00:50Z")

</div>

Nice refresher @Robert_Petitto . Appreciated. Sometimes we forget how flexible Glide can be in terms of navigation. Out of interest, any specific reason why you set the “tracking columns” in the User Profile sheet to be user specific? I don’t think there’s a need for this since the rows are “per user”?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 20, 2022, 3:16pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/5 "2022-05-20T15:16:50Z")

</div>

Thanks! Really it’s just out of habit when using Google Sheets. If we are using exclusively Glide tables, then it’s not necessary. However, when sourcing an app from Google sheets, I like these types of columns to be user specific. That way this “temporary data” doesn’t live in the Google sheet. Keeps the Google Sheet tidier, provides a faster data calculation and mitigates any data tampering by anyone with access to the Google Sheet.

At the very least, having these type of columns be blue in the data editor is a visual reminder that this is temporary data.

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 20, 2022, 3:21pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/6 "2022-05-20T15:21:21Z")

</div>

> [@Robert\_Petitto](#):
>
> , I include timestamps in the description.

Yes, and much appreciated. Those come in handy the second time through when trying to implement something.

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [May 20, 2022, 4:20pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/7 "2022-05-20T16:20:59Z")

</div>

Great video 👏.

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 21, 2022, 2:17pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/8 "2022-05-21T14:17:19Z")

</div>

So I really liked the left/right button acting as a menu because I have two tabs right now and the only difference between them is one has an inline list that lists parts from one section, and tab two has an inline list that lists parts from a second section. But they all come from the same table.

In practice, though, it doesn’t work out for my situation, because if you scroll down in the list, you have to scroll all the way to the top to see the dual buttons again. There’s the floating buttons, but you cannot make a dual button float.

I guess I’ll just leave well enough alone!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 21, 2022, 2:20pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/9 "2022-05-21T14:20:44Z")

</div>

Agree. This is where I’d use a bit of CSS to make the top element sticky:

Something like this (assuming the choice component is the first component on the screen):

```auto
[id*="screenScrollView"]>div>:nth-of-type(1) {
position: fixed;
width: 100%;
z-index: 100 !important;
//background-color: rgba(0,0,0,.8) !important;
margin-top: -1%;
padding-bottom: 10px;
backdrop-filter: blur(10px);
}

```

Note, this doesn’t work well with any of the “Bold” themes because of the way the header resizes when scrolling.

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 21, 2022, 2:28pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/10 "2022-05-21T14:28:27Z")

</div>

Thank you; in general, I like to avoid CSS, but I will make an exception in this case!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 21, 2022, 2:32pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/11 "2022-05-21T14:32:54Z")

</div>

Agreed. I use CSS when it improves user experience.

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 21, 2022, 3:14pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/12 "2022-05-21T15:14:02Z")

</div>

Yes, and it doesn’t always.

Here, it works great to freeze the top buttons, but my floating button gets pushed off the screen. You can just see the rounded corner of it here:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/3282493b7313d68cfadf2686abe6a9c3a7531ede.png)

I found this on another post and it worked right… Go figure. Another reason I don’t like using CSS – I don’t know how it works!

```
div[id\*='screenScrollView'] \> div \> :nth-of-type(1) { position: -webkit-sticky; position: sticky; top: 0; background: white; z-index: 3; }
```

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 21, 2022, 3:30pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/13 "2022-05-21T15:30:58Z")

</div>

AAAAnd sheesh. Went to another tab in my browser and when I came back, all the objects on my new tab were gone – and somehow replaced with other objects. No, I really DO NOT like CSS…

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 21, 2022, 4:36pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/14 "2022-05-21T16:36:51Z")

</div>

Looks like you replaced your details style layout with a calendar style layout. If you reselect Details, do the components come back?

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 21, 2022, 4:41pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/15 "2022-05-21T16:41:17Z")

</div>

Thanks Robert, I actually didn’t select anything; I went to another browser tab to check the weather, and then when I came back to my app tab it was like that. I quickly selected, “Discard Changes” so I wouldn’t have to find out what else in my app might have been compromised, so I didn’t investigate further.

---

<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 21, 2022, 11:42pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/16 "2022-05-21T23:42:52Z")

</div>

It’s weird if it automatically converts to a list-based layout like that. It is a Glide setting, not something that would be related to CSS, I think.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 21, 2022, 11:47pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/17 "2022-05-21T23:47:27Z")

</div>

Ya…def not related to CSS

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [May 22, 2022, 3:33am UTC](https://community.glideapps.com/t/build-better-navigation/42201/18 "2022-05-22T03:33:30Z")

</div>

The last one is so creative!

As always, thanks for posting (:

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [May 22, 2022, 4:52am UTC](https://community.glideapps.com/t/build-better-navigation/42201/19 "2022-05-22T04:52:26Z")

</div>

Hi Robert, I really didn’t mean to distract from this thread. It was only semi-related…

I found a post where @Jason was saying they want CSS examples so they can incorporate things into Glide to “make it less prone to insane breakages”.

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/13):
>
> At the moment I really just need a large sampling of what people are using. I need the visuals and the code. I want to see what yall are doing, try to figure out how I can make it less prone to insane breakages, and provide better functionality, etc.

Not sure how that fits in with what I experienced. I have re-implemented it and so far so good.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/1/31238993edd7edcfb6fa3c84b665b7b726673781.png)

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [May 23, 2022, 12:20pm UTC](https://community.glideapps.com/t/build-better-navigation/42201/20 "2022-05-23T12:20:13Z")

</div>

Great video - thanks!

Inspired a bit of experimentation….

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8d2a53aa9590aff0829d8d6e3d96b6d740701374.jpeg)

Eliminating the standard tab menu across the bottom makes for a cleaner experience and allows the tabs to breath with a full screen mode…

[Next page](https://community.glideapps.com/t/build-better-navigation/42201.md?page=2)