Navigation Truncating with Responsive Design...

[Jaxel]

So if you reduce the width of your browser, you will see that the navigation menu truncates down with three bars. Highlighting the three bars will popup a dropdown menu that allows you to click on the menu items that were truncated out.

This is nice, in that it truncates out the items starting from the RIGHT. So using this website as an example, "Members" will disappear first, then "Buy XenForo", then "Resources", etc...

However, with the sub-navigation menu, it truncates out the items starting from the LEFT. Again, using this website as an example, the first item to go is "Mark Forums Read", then "Search Forums", then "Watched Forums", etc...

Why is the sub-nav truncation different from the nav-menu truncation. Ideally, both menus should truncate from the same directly. Is there any way to fix this so both menus truncate from the right? In my eyes, items on the left are most important, so I would want them truncated out last.

 

[Paul B]

I would consider the sub nav items on the right such as "New Posts" to be more important than those on the left such as "Mark Forums Read, which is why it has been designed to drop those from left to right.

 

[Jaxel]

But there should be uniformity.

 

[HWS]

It is a very rare real world case that someone will intentionally reduce it's browser width while browsing the forums and even recognize the truncation. Because of that, it is not really important from where the truncation starts. It is important that the menu always looks the same if a visitor uses his client, no matter how small. And this is the case currently.

But there should be a navigation manager to allow admins to change the order of navigation items and their truncation hierarchy in responsive views.

 

[Jaxel]

@HWS, the problem is, when someone views a website on their phone. The items that are truncated out end up being the items on the left... which in almost every XenForo addon, are the most important items.

 

[Chris D]

If the add on author understands how the items are truncated then they can chose the position accordingly based on how important they are.

The add on author should put the most important items on the right and the least important on the left.

 

[imthebest]

The add on author should put the most important items on the right and the least important on the left.

Which doesn't makes sense unless you are from Syria or a similar RTL country.

I totally agree with Jaxel in the idea that there is inconsistency regarding how the nav items truncate when viewed on responsive mode. The main navigation bar "Forums, Media, Resource" keeps their order (from left to right) however the second navigation bar does the opposite (from right to left).

This is confusing to say the least.

 

[Paul B]

It's something which was discussed a lot in the early days of XF.

The main navigation elements have the most important ones on the left - this is standard UI.

The sub navigation elements have the most important ones towards the centre of the layout - certain elements related to this were changed early on based on feedback.

As @Chris D said, I designed my add-on to mimic how the core software does it, so the least important links are dropped first as the screen width narrows.

 

[Rob]

I understand both sides of this and share the opinion that there should be a robust navigation management system.

I'm sure that 2.0 would already have this in its specification draft.

 

[TheLaw]

I guess all that matters is knowing whether something can or will be done to change this priority in the core - and soon. Others here better equipped to know if tweaks can be done to reverse the ordering. I had planned launches next week and made efforts to move from a custom nav back to "standard" to remove future incompatibilities. This is a serious problem on all the sites - here's why.

1) The most important navigational item becomes invisible.
Let's say making a new post in the forum is most important. Your LTR eyes see the first item on the main nav is "forums." And barely moving your mouse is the "add new post" directly below it. Now using the core XF navigation, if the user is not using a large monitor that shows the site in full width, the most important item on the sub nav is removed and completely invisible from view. With more than 5 items on the nav with an average display font size, the leftmost subnav item disappears.

2) Frustrating inconsistency to users that is in contrast to most other sites.
If you have two horizontal menus - a top and subnav - then I think most users will expect them to work exactly the same way - both the menus and on their devices. The last items drop off in the ellipsis... which represents the end, not the beginning. And going from a desktop to a 10" tablet, you'd expect the right column to collapse or disappear along with the other items on the right. Removing items from the left represents the worst solution and acts in contrast to most other sites.

I'm not sure how "the middle" became most important as simple math debunks that approach. With 9 items, the "middle" is #5. If #1 and #2 drop out due to a narrower width then you have 7 items, the middle is now #4 - and so on. So.... is there anything feasible that can be done or are we talking about reverting a great deal of work and staying with the non-standard indefinitely? Thanks to all who can shed light on this.

 

[Chris D]

It currently works in a predictable way, so with the system as it stands at the moment there should be no difficulty in arranging the menu in a way that is logical.

In terms of the main navigation tabs, the most important items should be as far to the left as possible. As the screen size decreases, the navigation tabs on the right will disappear first.

In the secondary navigation links, the most important items should be as far to the right as possible. As the screen size decreases, the navigation tabs on the left will disappear first.

It's really that simple. It might seem counter-intuitive or odd, but the behaviour is predictable so it's easy to plan which links should go where.

The difficulty within the software at the moment is actually making changes to those links/tabs.

One feature we have announced for XenForo 2.0 is a navigation manager. We actually haven't started work on this feature, yet, but I do expect it will allow users to have more control (and easier control) over the position of items in navigation menus.

 

[TheLaw]

It currently works in a predictable way, so with the system as it stands at the moment there should be no difficulty in arranging the menu in a way that is logical.... It's really that simple. It might seem counter-intuitive or odd, but the behaviour is predictable so it's easy to plan which links should go where.

Thanks for the explanation. But if it's counter-intuitive or odd at first glance to the #1 people that matter most (the new and current users of the site) then that seems to be all that really matters. How we site developers work and plan is a far lesser priority - we must bear the brunt of inconvenience to make the users happy and giddy with seamless predictability. If it's a question of whether to change how the world works or the software, I think we know which is going to be an easier task!

The difficulty within the software at the moment is actually making changes to those links/tabs. One feature we have announced for XenForo 2.0....

I really appreciate your quick response and attempt to share a bit about the future. But the question that needs to be answered is whether (a) to invest in a replacement XF 1.x menu and abandon the work to standardize LTR if this is a website owner's priority; or (b) there is something feasible that can be done to make the subnav consistent to the main nav and reverse the order of priority?

 

[TheLaw]

I respect all the effort that went into generating a system that seems logical, which can change depending upon perspective.

One more thought on why I don't think I can use the standard XF nav. It's designed not to extend all the way across the horizontal width of the page, making the width even smaller and collapsing sub navigation, especially for older users who require large fonts. Every user I've polled expects items to "drop away" on the side where they were. So an item all the way to the right would drop away in a navigation element on the right -- and if it was on the left it would drop to the left. But not one person understood why what they saw on the left side has now traveled all the way across the screen to be hidden on the right side. They unanimously thought it was a bug - and I'm guessing it is what new users will think now. I wish there was another solution but it seems that it's more like a yay or nay is needed for those of us that have a few more subnav items than others. Thanks again for your quick responses and attempts to help.

 

[Okuma Steve]

Has anyone worked out a fix for this?