Closed khawkins98 closed 3 years ago
Thank you for raising an issue. We will try and get back to you as soon as possible. Please make sure you have given us as much context as possible.
We never got around to formalising what would happen on mobile (small viewports) with navigation - I recall it being discussed - I think the move to the new design exploration layouts removed some of the original CSS I had in place to 'make up' for the lack of design in older versions.
I'll dig it out and see what we can do.
(that's a lot of navigation)
I think that this would be a better experience?
https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu
rather than - taking up all that whitespace with a blocked list or throwing it behind a 'hamburger' menu.
+1 for trying the horiz scrolling for the site nav; good for a few reasons in my view:
It might raise questions/concerns, but I feel like it's a more sustainable path. I've also seen some other implementations that "hint" that you can side scroll -- but we can look into those if/when we need to, especially as that would need JS.
It might raise questions/concerns
One concern I have for things like this is – "do you need that much top level navigation?"
They don't need it, but it has to be there. :/
for example - is home not better placed as making "EMBL Communications" linkable to the 'home'?
on mobile it might be confusing too - is that home to the top level or home to the embl comms level
is home not better placed as making "EMBL Communications" linkable to the 'home'?
Yeah, good point. I can't recall why Mark advocated for "home" there. Perhaps the nav structure has changed in the interim.
I think this one can be closed?
Should we prioritise a "priority" nav like https://gijsroge.github.io/priority-nav.js/
Also similar to what we did for EBI, and the community was happy with it http://www.ebi.ac.uk/style-lab/websites/patterns/menu-local-nav.html
Or have we done enough for now and make a new backlog issue?
I think we can close this one and make a new backlog issue as suggested
I'm closing this as we now use vf-cluster
to help with the layout of --main
which this issue was mainly about.
@khawkins98 feel free to re-open - or start a fresh issue if there's some loose threads here that warrant further discussion.
We might want to re-open this one. In any case, copying a conversation with @sturobson from Slack so it isn't lost.
currently things like navigation flow (using the vf-cluster):
but what about something like this, so this only happens if the viewport is narrower than the content:
I sometimes think we could do similar for our news summaries and cards, in certain contexts. But that's a wide discussion
With one overarching ‘simple’ layout component (like we’ve done with stack and cluster) we should be able to ‘just’ drop it in as needed.
Although - for the navigation — I don’t think we want to show the ‘scrolling’ on larger screens where we have stupidly long navigation so perhaps we’d also need to introduce ‘breakpoint overrides’
<div class="vf-component | vf-reel vf-cluster--md">…</div>
The vf-navigation--main (and similar) don't respond to the viewport size, causing screen smaller than the nav width to horizontal scroll.
Visible on:
This is partly solvable by:
But then the component needs some space massaging.
It's the start of a wider thread about how to handle nav on mobile, but if the navigation can "gracefully" stack we can defer a conversation on burgers and tacos.
Priority set to high as we're getting close to launching some of these sites with the vf-wp--group-site theme.