Navigation and design best practises

Question 1) Move Navigation the Bottom:
How do I move my navigation completely to the bottom? It works on web browser but on mobile there is a margin at the bottom:

Settings are as follows:

Question 2) Make containers visible onClick and hide them again:
Once a button is pressed in the navigation a container turns visible in the same screen (“create coaching” - see below) and another container turns visible (grey background). After the event is over, the containers are hidden again.
Since I want this design on all pages, the implementation is tedious with multiple IF statements and boolean variables. Am I on the right track with the way I’m implementing this or is there an easier way?

I cannot help with the navigation issue, as I usually create a custom navbar for my projects, but that is a bit more effort.

You are on the right track with the way, but you can make it easier if instead of page variables you use app-variables and also you can copy-paste any component by simply pressing the ctrl+c combination and reuse it later. Logic is also copied this way. But make sure to check it, because sometimes it doesn’t find the right component. Or even if you feel that you will need the component a lot of times, you could even turn it into a composite component and reuse it later throughout the app as any other component from the marketplace.

1 Like

Thank you!

Regarding question 1, does anyone have an idea?

@Mevi Any idea? Thank you!

Have you tried using “disable safe area”? :thinking: That works for top at least, and also in themes there is a color variable to adjust the background color of the safe area, at least for the top.

Also, I had similar issue. In the layout tree choose “Page layout”. Then styles tab and set the page padding to desired amount. For bottom I guess that would be 0px.

1 Like