Responsive navigation bar

Hello team,
I am building the saas product on a platform which is offering my a left nav-bar and a top-nav bar.
I want to have left-nav bar as the primary menu for all the saas product modules, and the top-nav bar will be for sub-modules inside of the specific module selected.
For desktop screen, this format is working fine and as expected.
For Tablet screen, I am fine with displaying left nav bar as small menu and top nav bar as menu icon.
For mobile screen only - I am asking for help from any experienced experts who have used the nav bars in any dashboard driven products .
Because right now both nav bars are collapsing to top bar menu buttons, and one is hiding behind the other. I can only access one at a time.
Sticky while scrolling or changing the position of nav bar (to make it visible from behind the other bar) is not working. It is changing position on the desktop and tablet view screens also.
How have users displayed both the nav bars on their screen? any specific design examples that you can share screen shot and logic?

Sometimes you have to abandon the nav bars and make something custom. So on your mobile view hide the topbar altogether and rely on whatever you custom build then show that only on mobile.

But I will test this myself because I’m sure I have had it working in the past.

Thanks for the reply. I know what you’re saying, I have already made custom screen for different size nav bar.
I have seen similar design in Adalo Feature templates also, where desktop+tablet has one format, and mobile has some icon or floater button or bottom nav bar.
But I would like that to be last option. Because in custom menus I have to format every single screen for active/inactive tabs, and give proper links (forward and backward), etc. One mistake and whole thing will be ruined.
Instead nav bars are standard setting, I do it once and I do not need to worry about navigation, design, active/inactive, etc.

  1. I would appreciate if someone can share their experience of a smart implementation with screenshots
  2. I am new Adalo user, but on forum I have seen people complain about bottom nav bar sizing like this one (Extra space under bottom tab bar).
    Now that adalo has released responsive 2.0, is it safe to use bottom bar on all devices, without worrying about old issues?

Yes I agree, it is less than ideal, the nav bar should be set once and reused across your project.

In your situation I would make custom menu and hold it on a master screen, then paste it on each screen as required before publishing. Adalo is quite good at respecting copy, paste, so your layout will be matched.

I have achieved a ‘current screen’ style on the menu item by means of a visibility rule and an underline.

Compromise is unfortunately part of the no code journey in Adalo.

Do you have any experience or solution for point 2, that I’ve described in my previous message

Sorry I do not.
However if you build and want to test across many devices then use browserstack and you will save a tonne of time.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.