You can insert this piece of CSS right after : pre.span.style
[data-test="glide-app-bar"] {
z-index: unset;
}
[data-test="nav-bar"] {
z-index: 100;
}
You can insert this piece of CSS right after : pre.span.style
[data-test="glide-app-bar"] {
z-index: unset;
}
[data-test="nav-bar"] {
z-index: 100;
}
The CSS suggested by @ThinhDinh from the post above works much better
[data-test="glide-app-bar"] >* {
backdrop-filter: blur(0px);
background: transparent;
-webkit-backdrop-filter: blur(0px);
}
I tried it already before, but the text also scrolls over the title as in my last image.
I agree with you, this does not solve your problem ⌠sorry
Maybe you should give up the idea of placing the floating button so high? Replace top: 5% with top: 10% in your example and everything will look almost the way you want
I did try doing this using z-index as well, but never succeeded
Probably this is the best solution:
But in your Vegan showcase, your floating is on top right corner and the title zone doesnât hide it.
Howâs that?
If you put a top title, does it remove any transparency or prevent from clicking on the button?
Thks, ThinhDinh
In the Vegan showcase there is no title and no scrolling.
If you want a title the title bar unfortunately goes over the floating button.
I was trying to recreate WhatsApp to learn, and this was the result:
Woah!
That looks clean.
When is the tutorial gonna come out?
Probably something close to this but with a background color:
Simply wow. Might come in handy when Facebook Inc. has an outage.
I genuinely thought thatâs WhatsApp.
I canât believe that you managed to create such app with glideâŚ
Exactly! Seriously you had already taught this?
Hahaha, so it worked
Yesss