Secondary nav wrap issues on tiny screens
cassidyjames opened this issue · 5 comments
From https://github.com/elementary/blog/issues/34
Like iPhone 5/SE (tested in Firefox Responsive mode with the iPhone SE preset):
I tried adding a white-space: nowrap; to the <a> tags. It added a horizontal scroll bar just like the primary nav.
That looks a bit awkward to me, but letting the flexbox wrap with flex-wrap: wrap; gives this:
What do you think?
@dar5hak naively I'm fine with the first (it's similar to the main site), but I would be good with the wrapped version if we decreased the vertical spacing a little bit.
@cassidyjames How does this look?
I reduced the line-height to 3rem and added a small vertical padding to the flexbox.
(TBH even I'm leaning towards the scroll approach now. This looks kinda confusing.)
@dar5hak yeah I think I'm leaning toward the horizontal scrolling as well :)
Considering that scroll bars don't show up by default on Android (and I'm almost sure iOS), it makes sense to go with those.
I'll make a PR once I get home.