Responsive, accessible navigation 6: More flexbox?
10 Feb 2021
- Play w/ adding a new
a.topnav__body__actionable { display: block; }
to_nav.scss
. - Edit
_grd.scss
so agrdCell
, by default, has amax-width: 100%;
, since otherwise itsflex-shrink: 0;
property will let it force horizontal scrolling, and since I’m going to want to putgrdCell
on all the elements onto which I puttopnav__body__outeritem
(all of which have some very long text buried within). - Add an extra div around the for-loop in
nav.liquid
with a class ofgrdGrid
and then add agrdCell
class to every element that already has atopnav__body__outeritem
class.
So far, so good. I wouldn’t call it easy to read, but the idea that “outer items” try to pack in as far up & left as possible, while still “wrapping” when they run out of room in the frame, seems to be implemented.
Other than look & feel (e.g. highlighting things visually for hover/active; making things big enough to tap), this is probably about as far as I can go w/o starting to branch into “mobile” vs. “desktop” and “javascript” vs. “noscript.”