# Mobile app floating tab bar design

**URL:** <https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567>\
**Category:** Ask for Help\
**Created:** [December 8, 2022, 5:07pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567 "2022-12-08T17:07:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniel\_Brassnyo](https://avatars.discourse-cdn.com/v4/letter/d/3d9bf3/32.png) [@Daniel\_Brassnyo](https://community.glideapps.com/u/Daniel_Brassnyo)\
**Post date:** [December 8, 2022, 5:07pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/1 "2022-12-08T17:07:31Z")

</div>

I love Glide’s new home page, especially the use cases section. There is one mockup with the delivery app where they designed a floating tab menu. How can this be achieved?

 ![Screenshot 2022-12-08 at 18.04.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/1/a138a07eec8a63687246ad952953e12cbd9e3d77.png)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [December 8, 2022, 9:46pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/2 "2022-12-08T21:46:08Z")

</div>

Looks like CSS, which you can only add on Business+

If you have Business+, did you try downloading the delivery template and exploring their code?

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 14, 2025, 10:26am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/3 "2025-01-14T10:26:07Z")

</div>

Did you find out if this is possible?

---

<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:** [January 15, 2025, 1:37am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/4 "2025-01-15T01:37:23Z")

</div>

Pretty sure this is possible with CSS because I saw it in one of my colleague’s apps years ago, though I don’t have the code now.

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 15, 2025, 6:29am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/5 "2025-01-15T06:29:34Z")

</div>

Good to hear that it’s possible. Please let me know if you get a hold of the code. It would be nice to have this floating tab bar in glide (optional for mobile and desktop)  
It really looks cutting edge. Thanks for your reply👍

---

<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:** [January 16, 2025, 1:08am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/6 "2025-01-16T01:08:51Z")

</div>

```auto
<pre><span><style>

[id="tabBar"]{
    background-color: rgba(255, 255, 255, 1);
    height: 90px;
    padding: 10px;
    border-radius: 20px 20px 0px 0px;
    border-color: transparent;
    box-shadow: rgb(0 0 0 / 10%) 0px -15px 15px 0px;
}

.fab-target {
    bottom: 40px !important;
}

```

This is a Classic CSS, so please adjust it as needed.

---

<div class="post-metadata">

**Author:** ![\_Romieux](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/_romieux/32/83089_2.png) [@\_Romieux](https://community.glideapps.com/u/_Romieux)\
**Post date:** [January 16, 2025, 2:12pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/7 "2025-01-16T14:12:21Z")

</div>

Great! and how to use in free account mode, RichText is no more accepting code as data.  
regards

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [January 16, 2025, 3:30pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/8 "2025-01-16T15:30:46Z")

</div>

You must have a paid plan to use custom CSS.

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 17, 2025, 5:45pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/9 "2025-01-17T17:45:48Z")

</div>

Hey thanks for this, just saw it now, i will try it immediately and give feedback. Thanks again.

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 17, 2025, 8:07pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/10 "2025-01-17T20:07:39Z")

</div>

I cannot seem to get it right, is it possible for you to explain how to adjust the code and how do we place it in the app?  
You help would be much appreciated.

---

<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:** [January 18, 2025, 1:08am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/11 "2025-01-18T01:08:18Z")

</div>

Hope this helps.

 ![CleanShot 2025-01-18 at 08.07.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f59d7fa1133a1790fe9b57f996513e67908c96c0.png)

```auto
div[class*="main-nav"] {
    background-color: rgba(255, 255, 255, 1);
    height: 80px;
    padding: 10px;
    border-radius: 20px;
    border-color: transparent;
    box-shadow: rgb(0 0 0 / 10%) 0px 6px 15px 0px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Adjust the width as needed */
    z-index: 1000;
}

```

---

<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:** [January 18, 2025, 1:24am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/12 "2025-01-18T01:24:39Z")

</div>

Added to the library.

> **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/W37PLSwoT2uhCW6DspZTWg)**

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 18, 2025, 2:37pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/13 "2025-01-18T14:37:49Z")

</div>

Ah wow, thanks for that, i will try now. Epic! 👍

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 18, 2025, 2:56pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/14 "2025-01-18T14:56:43Z")

</div>

This is really an amazing design for the mobile nav bar. I’ve tweaked the radius and transparency and it looks amazing.  
Is there a way to do this for the top navigation bar on desktop?

---

<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:** [January 18, 2025, 11:51pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/15 "2025-01-18T23:51:25Z")

</div>

I haven’t explored that, is there a sample image of how you want it to look?

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 19, 2025, 11:46am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/16 "2025-01-19T11:46:30Z")

</div>

I used your code and adjusted to get this translucent tab with rounded edges for my tab bar on mobile. I would love to be able to do the same thing for the top nav bar. It would just spread the icons evenly across the width that i specify for the nav bar.  
Glide Main website allows the nav bar to disappear completely (except for the icons) when an image scrolls into view, but that’s not desperate for now. I really like the ability to make the image reach the top of the page and the translucent rounded nav bar floating over it  
My main thing is to make my top nav bar match my bottom one.

 ![Screenshot 2025-01-19 at 13.39.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1c3d4943555bf18ebfe070d18925b1ece3b7e23.png)  
 ![Screenshot 2025-01-19 at 13.38.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/1/a19e41a5a66a50970b41f4f7c40f2d29fc1fbb26.jpeg)  
 ![Screenshot 2025-01-19 at 13.37.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6cefa67b3fa91f35349bb180e5aacc058eaae225.jpeg)

---

<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:** [January 20, 2025, 1:23am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/18 "2025-01-20T01:23:02Z")

</div>

![CleanShot 2025-01-20 at 08.20.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/dbb7852115e78bb3e38e16e48b4d4124cacc4600.png)

Here you go.

```auto
nav[class*="scrollbar-hide main-nav"] {
background-color: black;
height: 20px;
padding: 10px;
margin-top: 5px;
border-radius: 30px 30px;
}

nav[class*="scrollbar-hide main-nav"] svg, nav[class*="scrollbar-hide main-nav"] button {
color: white;
}

nav[class*="scrollbar-hide main-nav"] .light-system-theme.highlight.selected, nav[class*="scrollbar-hide main-nav"] .light-system-theme.highlight.selected svg {
background-color: white !important;
color: black;
}

```

---

<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:** [January 20, 2025, 1:26am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/19 "2025-01-20T01:26:40Z")

</div>

Added to library.

> **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/2XVCI4sZTWW7MK-FipwT2A)**

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 20, 2025, 6:18am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/20 "2025-01-20T06:18:45Z")

</div>

Perfect, i’ll try this. Thanks so much.

---

<div class="post-metadata">

**Author:** ![ToOFa\_Apps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/toofa_apps/32/36816_2.png) [@ToOFa\_Apps](https://community.glideapps.com/u/ToOFa_Apps)\
**Post date:** [January 20, 2025, 6:31am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/21 "2025-01-20T06:31:11Z")

</div>

The only problem is see is that the standard nav bar (for desktop) is still behind the new floating nav bar. Is there a way to hide the standard desktop nav bar at the top and replace it with the black floating menu that you created. Also offset it from the top edge much like the floating nav bar for mobile. The result will be to have the exact same floating menu for mobile (as shown on the image below) at the top of the page for desktop👍

 ![Screenshot 2025-01-19 at 13.39.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1c3d4943555bf18ebfe070d18925b1ece3b7e23.png)

[Next page](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567.md?page=2)