Good navigation bar with varying # of buttons?

Hey Forum,

I am trying to build a navigation bar across the top of all pages in my app. At first, I was using my own buttons, then I moved over to a repeating group. I prefer the repeating group as that makes it easy to hide buttons based on user roles. However, I have run into an issue that I am hoping there is a cleaver solution to.

My repeating group is 7 columns wide and 900 px wide. The rest of the width is taken up by other necessary buttons. Because of that when the page is wider than the total of 1200 px the repeating group will stretch. This looks bad. I set it to horizontal scrolling and that seemed like a solution, but not all of the buttons load upon page load. You have to scroll to get the rest to show up.

I can figure this out lol. There has to be a solution.

  • Some solutions I have tried are to add a group focus, but I’m working with a repeating group haha.
  • Someone suggested I do an actual group and the build of that was a bit too much for waht this is.

I have been trying to condense the buttons down so as not to have too many but its not really possible anymore. the only way I can do that is if I get the group focus to work. Laughable Ahah.

Does anyone have any suggestions?

Here is a screenshot:

As you can see, there is plenty of room when the screen is stretched, and not every user will see all of the buttons, but there are a few people who need to see them. But does anyone have any ideas?

I appreciate any help!

All the best,
Benjamin

Try this…
https://2a7c93542693149360b49e2e8924dc26.bubbleapps.io/navigation_bar