I have had a bit of a passion project going on with the top-level main menu.
I have gotten this far. The issue is that the icons are too far from the words.
Here is the code.
I would appreciate any suggestions on making this look better and having the icons float left instead of to the right.
Problem is when other features are turned on top level overruns nav bar. To test you need to turn on everything that uses top level. Adding icons steals real estate from nav bar!
@sjpadgett, that is very true. I have struggled with the navbar’s real estate from the beginning of this endeavor. It has been a challenge, to say the least.
When I change the pr-3. It looks like this.
I think compact should be our default. There is more margin/padding tuning that can be done. Also nav has capability to wrap in the bar I believe.
When I get some more free time, I will dive deeper into the navbar’s CSS. There has got to be a balance here that can work. There are no senior-level videos out there in the world about this stuff. Humph! 
If you are using “icon” value as class, you could try adding “mx-0” or “mx-1”.
Since there are too many top level items, value of icons is subjective judgement. If you must, bootstrap/responsive way of doing this will be include menu label importance level in definition and let boostrap trigger collapse event for menu bar. Then process that event to collapse menu labels to icons per importance level. So if bootstrap cannot fit your menu due to small device, e.g. the handler will first collapse “Miscellaneous” into corresponding icon. As the window size keeps shrinking, top labels will keep getting replaced by icons.
It will be fancy work considering the jumble of frameworks and event managers involved. But its your passion.
Best.
@mdsupport, thanks for the encouragement. Do you know where the menu label definitions are located? If you could share, that would relieve some of my burden.
This is a suggestion - something you would need to add to the top level labels unless you want to wade into bootstrap gate of hell that opens with this single line in their documentation
.collapse.navbar-collapsefor grouping and hiding navbar contents by a parent breakpoint.
As an aside, since you referred to iPad users, you could explore bypassing current menu structure and use big menu panels that fill up full screen. Touch driven navigation on small factor devices is radically different than mouse driven navigation on desktops. So are the screens and their layouts.
All the best.
