Make anchors have top-padding

[baronfel]

This padding makes it so that a clicked anchor is visible underneath the top sticky nav. I am not at all sure that this is the correct way to handle this situation.

Description

• fixes [Website] anchor link titles are hidden under stick top nav #2201 by adding 50px padding.

TODO

• [] Is this the appropriate sizing?
• [] Is there a constant that would otherwise be appropriate?
• [] Is this padding appropriate for all .content .anchors?

[matthid]

I am not at all sure that this is the correct way to handle this situation.

@JarnoNijboer @florianbader is it?

[florianbader]

@JarnoNijboer @florianbader is it?

Looks good to me.

[sliepie]

Me also, an increase to 70px would make it perfect

[matthid]

I just tested this on staging and found the following "glitch":

You cannot (easily) mark the text below the purple box. I'm not sure if this is fixable or how. Anyone an idea?

[baronfel]

Instead of padding, margin could be used to create space above the text but below the upper section content?

Or the z-indexof anchors could be set lower than the x index of the page content so that the page content would remain selectable in this situation?

[sliepie]

Margin doesn't work unfortunately. We could however fix it with some js:

Below should work, it's untested

(function() {
    if (document.location.hash) {
        document.body.scrollBy(0, 70);
    }
}());

[florianbader]

Using the following on the anchor works for me, but we would need to create the anchor separate from the header link. I can create a PR for that later if someone isn't faster.

.anchor { display: block; position: relative; top: -70px; }

<a name="Reference-a-paket-group" class="anchor"></a> <a href="#Reference-a-paket-group">Reference a paket group</a>

[sliepie]

Delete comment with the :target selector solution works, but has the same issue with text selection as the current one.

[sliepie]

This one works for me: inspired by @florianbader solution, i've used ::before selector to create the dummy anchor:

Corresponding PR: #2209

.content .anchor::before {
    display: block;
    content: "";
    height: 50px; /* Fixed menu height */
    margin: -50px 0 0;
    visibility: hidden;
}