Hi all, if anyone can point to a cloneable resource or tutorial for the persistent left navigation screen, would really appreciate it, thanks!
On my web app I’m redesigning (ugh) to remove the top section and replace with an app bar with a hamburger menu left icon. I’m guessing that upon click, the action will be to link to the persistent left nav screen (on all screens with the hamburger icon), and then follow on links from there to other screens within the app.
The problem I’m having is that on desktop web, the sidebar expands too much and takes up almost half the screen. I haven’t changed any settings from the template provided by Adalo.
I also ran into the same problem you mentioned. One workaround for this that might work (haven’t tested it out yet), is to set the size of the screen to 1920 x 1080, and resizing everything according to that. I don’t know if it will work, but one of the things I’ve been planning to test to fix this problem
An additional advice to @AddyEdwin’s one: you could also try to put rectangle on your right side of the screen - between the left nav bar and screen edge.
And then put all the content inside this rectangle.
What could be expected - with this rectangle both parts (left & right) may start to resize proportionally.
Some side notes:
But building responsive web app is not an easy task, unfortunately :frowning In my experience, designing a desktop web app is always done via trial & error.
As I understand, in most cases visual components in Adalo are responsive; so they try to keep proportions but not the exact pixels. However, in some cases the “fixed width” rules appear: usually when you have a small width elements, they remain fixed, while others which are “wider” are responsive.
I’ve spend quite a bit of time experimenting, see this thread & video for example:
Thank you everyone. What worked for me was placing a rectangle component over the entire left navigation bar, and grouping it with the left navbar, making sure that the background color was off.
Now, does anyone know if it’s possible to create active/inactive colors upon cursor hover in a web app? The default Adalo left navbar component comes with a gray bar over the link/text “About”, as if it were active. I’m just going to remove it.
As above, when I try to implement a side nav bar, my sidebar expands too much and takes up half the screen. The solution @tdhi suggests (adding a transparent rectangle on top) fixes the layout going crazy but then you can’t tap on any of the buttons behind the rectangle. Does anyone have a solution?
I have tried many methods - read all kinds of forum examples, etc and I have been unable to create a sidebar navigation that is workable for my web app. Having a vertical scroller that works in the same manner as the horizontal scroller would be a great fix for this. This has actually been a big roadblock for the web/tablet app I am developing.
If this is currently possible and I’m just not finding it… please let me know.
Hi @tdhi – It took me an extreme amount of time to figure out why the sidebar would expand across the screen. Not to mention the frustration with Adalo editor. So I hope this can help in some way. I am still trying to get it to behave the way I needed it to, but is a good start.
There are many factors that go in to make it work just right and depending on your layout or design you will more than likely need to experiment a bit more.
Some factors,
Visual Layering
Component Ordering (Extremely important) related to what gets printed first on the page
Screen size
Groups
Spacing (or lack thereof )
Setup:
Preview:
The hide and unhide button is just a true/false toggle on the user collection. And the white expandable menu section is set to only visible if condition is true.
hay there. This looks awesome. How do you show and hide and set up the actions etc.
I feel like it should be easier than I am trying to build.
If this is just a test any chance you can clone it for me?
@hobokencloud - thanks for this. A relief to see that this was possible. Is there any way we can access this or can you provide a little bit more information on how you were able to put this together (for newbies )?
I am just curious if it is possible to make the expanded menu be scrollable? I am planning to add a bunch more items to it and then have sub menus appear when the items are clicked. With this, it is making the menu a bit larger so if the user could scroll on this menu that would be perfect!
)?