# 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:** 7\
**Page:** 2

<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 21, 2025, 12:10am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/22 "2025-01-21T00:10:02Z")

</div>

> [@ToOFa\_Apps](#):
>
> The only problem is see is that the standard nav bar (for desktop) is still behind the new floating nav bar.

Can you show me a screenshot of this? I’ll get to it later this week.

---

<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 21, 2025, 12:22am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/23 "2025-01-21T00:22:14Z")

</div>

Your code that you created for the nav bar, it still has the standard nav bar showing behind the black nav bar with rounded ends.  
It would be nice to have a floating nav bar with no other menus behind it. Just like my mobile nav bar (see blue screenshot below) , but i need it for the top of the page on desktop view.  
Yes, later this week is fine. I’d appreciate that👍

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

---

<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 21, 2025, 12:29am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/24 "2025-01-21T00:29:24Z")

</div>

So you want to remove the app’s logo, name and the profile picture right?

---

<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 21, 2025, 7:21am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/25 "2025-01-21T07:21:45Z")

</div>

Yes, and the whole top menubar/nav bar at the top. The logo, sign in & signup buttons, menu background color, etc. Also need the ability to position the floating nav bar away from the top of the page, essentially the exact same adjustments that are possible with the mobile nav bar (as seen in the blue image of the floating nav bar i attached above)  
That would be amazing if it were possible to do all that. Thanks @ThinhDinh, totally appreciate the time you’ve put into this👍

Edit: I initially was thinking the nav bar change could be just on one tab, but if it’s applied to all tabs then we would need to leave the sign in and sign up buttons (or users profile picture when signed in) on the right. But for this floating nav bar i think the app icon and name on the left is not necessary as it will clutter the design.

---

<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:** [February 1, 2025, 10:16am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/26 "2025-02-01T10:16:12Z")

</div>

Hi there. Did you have any luck with this

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 1, 2025, 11:42am UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/27 "2025-02-01T11:42:42Z")

</div>

Could you clarify more on what you want?

---

<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:** [February 1, 2025, 1:17pm UTC](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567/28 "2025-02-01T13:17:51Z")

</div>

Sorry, I didn’t have time to go through this. Please add some more pictures on what you want so Himaladin can help. Thank you.

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