How can I space out the items on the horizontal nav bar - is there a way to space them out evenly in the middle of the nav bar?
There probably is with a CSS trick, but you probably shouldn't. All popular GUIs have menus left justified and this is where users expect them (and why the component defaults to that setup). Doing anything else just causes cognitive dissonance in your users (as does the overwhelming background on your screengrab).
I feel as if that causes cognitive dissonance is just opinion. In my opinion I like it, its engaging, and nothing seems to be overwhelming.
You can play around with padding or margins on the itemStyle properties.
Ex: paddingLeft: 10% and paddingRight: 10%
These percentages can change depending on how many menu options you have.
1 Like
If you're using 8.1.22 or newer, you can control this while making use of the stylesheet.css resource.
I applied the two following rules to my stylesheet:
#centered {
justify-content: center;
}
#space-around {
justify-content: space-around;
}
These two rules target two Horizontal Menu components with meta.domId values of "centered" and "space-around".
This is how they appear in a session (centered on the BOTTOM, and space-around on TOP).
Please note that these two examples have relatively few items, and it is unclear how the left/right scrolling options will work with these settings in place as the rules would also be applied to those proprietary scrollers.
1 Like