# How to create a floating nav bar with rounded ends using css? (for mobile or desktop view)

**URL:** <https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188>\
**Category:** Ask for Help\
**Created:** [January 14, 2025, 7:10am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188 "2025-01-14T07:10:47Z")\
**Posts on this page:** 5\
**Page:** 1

<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, 7:10am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188/1 "2025-01-14T07:10:47Z")

</div>

Hi there, i remember seeing this feature was possibly going to be added last year but i haven’t seen any more about it. Can this be done with Css? Please could someone give instructions, if it’s possible? Much appreciated.

---

<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 14, 2025, 7:27am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188/2 "2025-01-14T07:27:11Z")

</div>

Have a browse in the [CSS Library,](https://css-library.glide.page/dl/library) there are several floating button options.

The other option would be to have a play with the Custom AI Component.

---

<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, 7:38am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188/3 "2025-01-14T07:38:36Z")

</div>

Thanks Darren👍 Will go check that out. Awesome!

---

<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:21am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188/4 "2025-01-14T10:21:26Z")

</div>

Wow, i found a lot of nice css styles there.  
I didn’t find any way to make the tab bars floating, with rounded ends.  
Any other resources you might know of?

I found this image of exactly what would like

 ![Screenshot 2025-01-14 at 12.23.31](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bddaa1aecc7e10dc9b14443b8c5bba0229dd427d.png)

> [@Mobile app floating tab bar design](https://community.glideapps.com/t/mobile-app-floating-tab-bar-design/55567):
>
> 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?

---

<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 14, 2025, 10:38am UTC](https://community.glideapps.com/t/how-to-create-a-floating-nav-bar-with-rounded-ends-using-css-for-mobile-or-desktop-view/79188/5 "2025-01-14T10:38:40Z")

</div>

dunno, sorry. CSS is not one of my things 🤷‍♂️