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?
1 Like
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?
1 Like
Did you find out if this is possible?
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.
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👍
<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.
2 Likes
Great! and how to use in free account mode, RichText is no more accepting code as data.
regards
You must have a paid plan to use custom CSS.
1 Like
Hey thanks for this, just saw it now, i will try it immediately and give feedback. Thanks again.
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.
Hope this helps.
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;
}
1 Like
Added to the library.
Ah wow, thanks for that, i will try now. Epic! 
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?
I haven’t explored that, is there a sample image of how you want it to look?
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.
Here you go.
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;
}
2 Likes
Added to library.
1 Like
Perfect, i’ll try this. Thanks so much.
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👍