Bottom bar and how to create it?

Hi , you told me i can realize a bottom bar by putting absolute on a div , in another framework i found i can do it by putting fixed as position and a top 650px , here i can make it , while i put a navigation a this stays on top while scrolling if i duplicate i cannot make it stay such the one on header, can you help me with ?

1 Like

ok…i think i found a way.
Using a toast .
Here it is .

3 Likes

ps.Don’t know why but when i come back to the project the object i customized loses its stay on top while scrolling feature …every time.
Tried to ask about this to the developers , i mean "how to create a bottom bar " but no luck so far.
I would suggest to them to create this much needed component.
What you think?

Hi @lelemarea :wave:

The toast and modal comments should stay where you placed them when you scroll. Is that not the case?

If not, could you record a short video explaining the behavior you’re seeing and send us a link to the project editor so we can have a look?

Thanks!

Yes that should be the case , this while there is not bottom bar to be used and i hope it will come as components , by the way , i take the toast and i convert to a bottom bar but when i come back such as from yesterday today the toast no longer stays in place while scrolling.
Give me few moments and i will give you all.
ps.how can i share the link with you?

You can share it here or send me a DM

Thanks Joyce but as far i can see i can only share screenshots but not a direct link to my project

Hi @lelemarea

Designing the bottom bar with the toast component is a great way to do it.

Here’s a video on how it works. You can see the scrolling works perfectly. You only have to design it once and it should always stay the same.

We haven’t uncovered any bugs on our side.

If you’re still struggling with this, you can send me the URL of the project you’re working on.

Hi,

I recently created a bottom Nav using the toast element and it works great on both desktop and mobile, but I encountered a weird issue when displaying on an actual mobile device. When the address URL displays, this is not included in the viewport height calc “VH” and hence cuts off the bottom of the toast/modal. I believe if it was possible to use height: 100% rather than height: 100vh this would solve the issue for modals?

Here’s a video showing the issue using a toast.

Instead now I’m using a section with the position set to “Sticky” this seems to work fine, provided you ensure the min content height for the page is atleast 100vh.
https://e4068174-ee81-4b1a-b9d9-bd1a79e1e2d8.weweb-preview.io/app/dashboard?tab=resort&subtab=gate-pass

Cheers

2 Likes