New Theme: Menu collapses early but doesn't align with header grid.
Closed this issue · 16 comments
Description
Likely because there are many items in the menu, the menu collapses at 1400px. The arrow doesn't align with the header but instead aligns with the content.
To be quite honest, I don't think learning pathways should be in the menu at all and added that comment in figma.
Screenshots or screen recording (optional)
@WordPress/meta-design thoughts please?
This is a curious one. Technically it lines up:
Though Steve's assessment is accurate, optically it doesn't. But in exploring this, it feels like it's a side-effect of a somewhat unique collapsing behavior:
Note how it collapses to a dropdown twice. I'm sure there's nuance I'm missing, so looping in @fcoveram, but if it were possible to collapse at a later stage, and only once, it might be better?
The collapsed state of the local bar was thought to be next to the global header's medium variant. Here is a screenshot from the Design Library.
I agree that local nav items expand the area significantly, but while testing a prototype showing either the pathways or the content types, it felt like there were missing ways of browsing content. If users land on a Course, there should be an affordable way to see all Courses and the Courses related to a pathway.
Training team's input is crucial here to see what options we have. What do you think @kathrynwp @jonathanbossenger?
In terms of design, if we decide to continue showing both browsing ways, we could put the three content types in a dropdown menu. Similar to the current About page.
@ryelle as the most experienced local nav engineer, would you be able to take a look at this please?
I'm afraid I'm not going to be much help here, I don't really use that menu when navigating around the Learn site.
@fcoveram I'm not really following exactly what you need input on, would you mind clarifying a little more, maybe with a specific example? Thanks!
Sure. Sorry for not adding enough context.
Problem
The local nav, or the main navigation component of Learn, was thought to have all Learning Pathways inside a dropdown menu and the rest of links (Courses, Lessons, Online Workshops, and My courses) visible all the time to allow users browsing content in different ways.
The mockup looks like this.
The problem stated above is that all these items extend the nav area significantly and forces requires a change to the chevron menu icon before the global header changes to its simpler version. When that happens, both the global header and local nav create an odd margin; as shown in this image.
Solution
I envision two ways of addressing this change.
- Remove items in the local nav and rely part of the browsing journey on links displayed in the pages
- Group the items related to content type (Courses, Lessons, and Online Workshops) into a single dropdown element, similar to the Learning Pathways item with a chevron.
Here is a mockup for the second point with a sample label ("Content")
Hi @fcoveram - where you say "as shown in this image" – that doesn't load for me.
Remove items in the local nav and rely part of the browsing journey on links displayed in the pages
Group the items related to content type (Courses, Lessons, and Online Workshops) into a single dropdown element, similar to the Learning Pathways item with a chevron.
I would really prefer if we could find a solution that doesn't add barriers for learners to navigate the site, which is what removing or condensing navigation items does, in my opinion.
If this isn't looking good aesthetically (I still can't see the problem, but I trust you that there is one) let's try to come up with an alternative solution that doesn't sacrifice user experience, making it as easy as possible for visitors to access the key parts of the site without removing items or tucking them away under a dropdown.
I can add some context for why this happens at what appears to be an arbitrary size. The switch happens here to prevent the menu from running into the (currently hidden) page title. For example, when you scroll down on the page, the title appears, and you can see that they're almost colliding at 1220px wide, so if your screen is <1220 (but larger than 890), the menu switches to the little collapsed dropdown. Like the expanded menu, this is aligned with the page content, not the download button.
| Menu at 1220px | Menu at 1219px |
|---|---|
 |
 |
The same thing happens on Developer pages with longer titles, for example this page, which switches to the dropdown at 1170px. Here's a video showing the switch.
menu-collapse.mp4
This will happen on any page with a long title, for example https://learn.wordpress.org/course/developing-with-the-wordpress-rest-api/. Shrinking the menu would help, but on these long-title pages it would still switch before the 890px breakpoint (which changes the global header).
If this page in particular is an issue, you could also remove the "Learning Pathway:" prefix from the local nav title.
If this page in particular is an issue, you could also remove the "Learning Pathway:" prefix from the local nav title
I didn't understand this alternative, but if it's something we can test and see how it looks like, great.
Section name in components and pages
I noticed that we're showing some sections differently depending on the component or the page you are looking at. I could have missed the decision of some of these, but I revisited the major changes we've implemented, and here is a table showing how the name changes.
| Section | Menu item in global header | Hero section in Homepage | Section name in local nav |
|---|---|---|---|
| News | News | News | News |
| Showcase | Showcase | Showcase | Showcase |
| Themes | Themes | Themes | Theme Directory |
| Plugins | Plugins | Plugins | Plugin Directory |
| Patterns | Patterns | Patterns | Patterns |
| Documentation | Documentation | Documentation | Documentation |
| Forums | Forums | Forums | Forums |
| Developer | Developers | Developer Resources | WordPress Developer Resources |
For this issue, I think we can change the "WordPress Developer Resources" label in the local nav to be either "Developers" or "Developer Resources" and gain more space, and hopefully, prevent the layout break initially reported.
Generally speaking, I don't think the word "WordPress" and "Directory" are needed as the page provides enough context to convey users are in the WordPress site and seeing a content directory.
I didn't understand this alternative, but if it's something we can test and see how it looks like, great.
I was suggesting removing this part of the page title, which would shrink the space that the page title takes up, so the menu would have more space. That changes the breakpoint where it collapses to around 920px (in English, at least), so there's a smaller width-window between that & the global header breakpoint.
But as I said, this will still happen on other pages with long titles, like https://learn.wordpress.org/course/developing-with-the-wordpress-rest-api/ — view that page at 1300px wide, and the menu is collapsed to prevent collision.
Honestly, I think it makes sense to align this with the content, since once you scroll down, you no longer see the global header and it would look off-center if the menu was aligned to the download button.
For this issue, I think we can change the "WordPress Developer Resources" label in the local nav to be either "Developers" or "Developer Resources" and gain more space, and hopefully, prevent the layout break initially reported.
Can you report this to the developer repo? Same for any other changes you're requesting on the other sites.
Now I understand the part that can be removed. Thanks for the clarification.
Honestly, I think it makes sense to align this with the content, since once you scroll down, you no longer see the global header and it would look off-center if the menu was aligned to the download button.
Agree with this. But at the same time, the hierarchy should prioritize the nav elements and avoid hiding them when before the breakpoint shifts to the smaller version.
While designing the local nav, I explored a local nav version with a gradient overlapping the page name label when this overflows its container. Here is a mockup based on the page linked above.
Is it doable to replicate that effect in the large variant of local nav? Here is a prototype of what I have in mind.
CleanShot.2024-07-11.at.12.17.08.mp4
I missed responding to this.
Can you report this to the developer repo? Same for any other changes you're requesting on the other sites.
Yes. Doing it now.
Is it doable to replicate that effect in the large variant of local nav? Here is a prototype of what I have in mind.
Technically doable, but I don't think it's a great experience for the mid-sized screens to have a hidden page title. And just about every page title would be hidden around 1000px, because there would only be space for 8-10 characters.
Also, while the overflow makes sense on small screens, where you touch to scroll often, it would introduce a scrollbar onto the page title on non-touch-screens (and since this happens on the larger-mid-sizes, will probably be desktop/laptops).
Your mockup stops at 1085px, so here's an example going all the way to the header breakpoint (890px). The page title becomes pretty much unreadable by 1000, and even the site title starts to be hidden right before the switch.
overflownav.mp4
Another option could be to simply drop the page title when it would collide, so that only "Learn WordPress" is there:
ScreenFlow.mp4
Given all of that, I prefer the current implementation, followed by dropping the page title. But if you still think the overflow is the best approach, it can be done.
The overflow example looks really bad, you're right. I like the idea of dropping the page title. So +1 to that.
I like the idea of dropping the page title. So +1 to that.
Cool, let's do that. I've moved this over to a wporg-mu-plugins issue since it's site-wide, this doesn't need to be tied to Learn. WordPress/wporg-mu-plugins#640