Fix menu heading anchors and highlighting

[hftf]

Broken in b6688d1

[MattiasBuelens]

I see, the checkbox is now below the title, so the anchor causes the page to scroll past the title... awkward. :stuck_out_tongue:

[MattiasBuelens]

All right, I did some testing.

The classical 'hack' would be:

.my-anchor {
    position: relative;
    top: -10px;
    padding-top: 10px;
}

This keeps the element in the same position, but extends the bounding box upward so the anchor position moves upward. An improved version would use a pseudo-element:

.my-anchor:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 10px;
    margin-top: -10px;
}

The real problem is that the anchor is on an checkbox. A checkbox doesn't have content, so pseudo-elements don't work on it. Padding also doesn't work, since padding is applied around the contents of the element.

One hack I found was giving the checkbox height. This causes the bounding box to grow, and the checkbox is displayed in the center of the bounding box. Therefore, by making the height twice the top offset, we can sort of get it right:

.my-container {
    position: relative;
}
.my-container .my-anchor {
    position: absolute;
    top: -10px;
    height: 20px;
}

It's a total hack, but if we want to keep the anchor on the input, I'm afraid we'll need such a hack. Of course, we could give the title its own ID (e.g. menu-bb) and use that as anchor instead, eliminating this problem altogether...

[hftf]

I don't think we need any positioning hack; simply give the menu the bb ID and the checkbox some other ID like _bb. (I suggest that we also do this for buttons.)

[MattiasBuelens]

Sure, we'll need to change quite a bit of code for the _bb change, but fair enough.