I have tried to apply a menu effect that my design calls for, but it is super frustrating. It is actually one of the sample in the “Custom Navigation” clonable kit. So for starters, please understand that I have done my homework on this.
Here is the menu effect I’m referring to. It has a simple line below the text that reveals when that screen is active.
The example in the kit contains nothing dynamic or magic. It just lays them out. But I’ve tried this both ways and have had wildly frustrating results.
The issue stems from the fact that the items tend to grow or shrink improperly when the screen real estate changes (which is a real-life condition we have to deal with). It is especially frustrating when you try to use longer words or try to have the elements expand to fill the space. Then the “auto” features of Adalo (which normally help) actually give you wildly bad effects… sometimes it stretches them disproportionally, or aligns to center when it’s not supposed to or something.
So my question: Is there a better way to create this effect? (because the one in the cloneable kit is not practical in the real world). I’ve looked over the various Adalo marketplaces out there for an component that would do this, but I haven’t found it yet. Is this a candidate for a new custom component?
I can, but I gave up trying to make it work. Instead of having it go from edge to edge, I made grouped it together and centered it. So here is a sample of the latest, but not the one that was failing.
That was similar to how I had been doing it, but not entirely. I will try it exactly the way you did it and see if I get better results. For one thing, mine might be slightly easier because my navs will take me to a different page, so some of that wont need to be done. But it’s good to have the option.
Secondly, are you sure this scales to different device footprints? I’m thinking the use of the rectangles and the way it’s nested will keep things locked. But what I found was weird behavior… like sometimes the middle one got stretched while the two on the outside remained the proper size… or something like that. Are your boxes locked down enough so that it will scale across different size devices?
