header.hbs renders above the top of the HTML document, out of view

[redlet]

When using header.hbs in 0.3.5, my book is perfectly formatted. After updating to 0.4.2 (latest on the AUR at the present time), I get a blank placeholder and the actual header renders above the top of the page.

[ehuss]

This seems to be an unfortunate regression due to #989 (cc @WofWca). The "page" div is positioned above the top of the window. I don't know why it was done that way, it seems like it would be best to try to avoid that.

[WofWca]

Crap.
Sorry, will try to check this out within two weeks.

[WofWca]

I'm thinking if we should actually keep the header slot above the menu. To me this looks pretty ugly. I'd prefer it below the menu and above the title. Making it so would also fix this issue.

Some links:

• MR that implemented the header.hbs: Adding a header partial integration #453 #454
• Commit in The Book that removed the warning
• Some commit in The Book that had warning and had the menu bar still statically positioned.
• MR that introduced the warning banner

[tjkirch]

I'd prefer the header where it is now, at the top; perhaps there could be a new setting for people who prefer it below the menu, rather than changing behavior?

[ehuss]

Just jotting down some notes about this...

I think it will be quite difficult to support variable-sized elements above the menu bar. I think the size needs to be encoded in CSS. This really could use a web expert to see if that is possible. Otherwise I think the best solution is to just move the {{> header}} below the menu bar.

In general, the auto-hiding menu bar can be a little cantankerous. For example, on Firefox it gives this warning:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features! index.html

​I really like the auto-hide behavior, and it seems to work pretty well in my testing. I do notice some stuttering while scrolling sometimes, but I'm uncertain if it is related to this.

I did run across the Fucshia docs at https://fuchsia.dev/fuchsia-src/contribute/docs/documentation-navigation-toc which seem to handle this pretty well, too, and that doesn't generate warnings. It has content above the menu bar, but it is a fixed, known size.

[Pfeil]

First of all: I am by no means a web dev. But what I just did was customizing the index.hbs and switch the following lines like this:

<div id="menu-bar-hover-placeholder" class="click-transparent"></div>
{{> header}}

Also, I had some link element (a small logo) in the header which was not fully clickable because of the placeholders z-index. The solution was this css class (you can also see it added in the snippet above):

/* Workaround to make the logo header clickable. */
.click-transparent {
    pointer-events: none;
}

It was the only solution I found not to destroy the scrolling behaviour (at least it seems to work for now). But if the headers height is smaller than the placeholder, there will be a certain gap due to the placeholder... holding the place :D.

A bit off-topic but somehow related:
I only add the header on mobile devices (css hides it otherwise), as the logo is "usual" (on desktop) on the right side of the heading near the print button. If I had a (additional-)right-buttons.hbs I could do everything I need without overwriting the index.hbs, which would be nice. Is this (and the same for the left buttons I guess) something you would consider too much/complex or could this be a thing?