Nav button overlaps with masthead breadcrumbs

[arthurattwell]

On small screens, the nav button overlaps with the masthead breadcrumbs.

[SteveBarnett]

@arthurattwell I suggest a slightly odd fix. We use nth-child and @media queries to hide some of the masthead breadcrumbs on smaller screens (so that there (more likely) isn't an overlap).

What do you think?

[arthurattwell]

@SteveBarnett That would reduce the likelihood, but we still need at least two terms for the breadcrumbs to be useful. Probably worth doing anyway, at least to hide the book title.

Might another approach be to change the UI so that, on smaller screens, the breadcrumbs are not displayed in the masthead area, but just below it in small type? Feels like a messy solution.

I think your solution is the best one for the template for now. A UI solution might come later, based on what we learn from custom fixes on a few future projects?

[SteveBarnett]

I have some thoughts.

1. Poking at at this a bit more, there also seems to be some confusion (for me) about how the breadcrumbs and the URLs match up. If the breadcrumbs show me at The Title / Frontmatter / Copyright then the URL should be frontmatter/copyright, but we're at /book/text/0-2-copyright.html. Hmm, maybe we should add "Review URL structure and match with breadcrumbs" as a new issue 😬 ?

2. But back to the overlapping: a popular pattern is that nudge-down you mention: menu and Book title on the top row, breadcrumbs on a second row (if at all).

3. Another option: add some margin-left to the breadcrumbs. The amount needed will change with the contents (ahem) of series.nav-label, but we can set a default.

4. Move [href="#nav"] inside .masthead so we don't have to position: absolute it, and do 3 too. Why didn't we do that straight away? ¯_(ツ)_/¯

[arthurattwell]

@SteveBarnett

1. Ah, yes, the URL question is one that bugs me, but I haven't found a better way. Breadcrumbs are generated from nav, and might not relate at all to file names and therefore URLs. One of the first things I did with the EB template was to turn off Jekyll's default permalinks, so that all the HTML chapters of a book would generate in one folder, each named as they'd been created. This was necessary for easier PDF output and to follow epub convention. But it makes for less-than-ideal web URLs. I'd be keen to bounce some ideas around in person about whether we have any sensible options, like using Jekyll permalinks if site.output == 'web', and seeing whether Jekyll collections have anything to offer for organising books. That feels like a huge shift, so I almost don't want to think about it – but better now than later.

2. Agreed.

3. This still feels a little hacky for fluid environments, but, yes, might still be worth doing.

4. I need to find proper headspace to look at this. But it sounds good.

[arthurattwell]

I now think we should just do .masthead ul { display: none; } on small screens in _web-masthead.scss. After staring at sites with this overlapping issue for over a year I haven't yet seen a case where the masthead breadcrumbs are genuinely useful on mobile, anyway.

Perhaps a setting to add to our Sass variables, e.g. $masthead-mobile-breadcrumbs: true to show them, with default being false.