Headings invisible due to navbar when following permalinks

[Krinkle]

Following a link to any heading (i.e. from the table of contents sidebar, or from the glyphicon-link button) leads to the heading itself being obscured by the navbar.

Example: https://lesscss.org/#overview

Actual:

Expected:

Other information:

The HTML looks as follows:

<h1 id="overview" class="docs-heading"><span class="anchor-target" id="overview"></span>
<a href="#overview" name="overview" class="anchor glyphicon glyphicon-link"></a>Overview</h1>

The solution is already here, which is that the anchor-target is positioned such that the navbar is accounted for. However, because the heading itself has the same ID as well, this anchor target ends up ignored.

This appears to be a regression from #588, which removed the $(this).removeAttr('id') call from the HTML generation that inserts these icons.

A quick hack could be to give the headings a different ID. That has the benefit of making TOC and permalinks from glyphicon-link button work correctly. However, it also has the downside of 1) Algolia results having the same problem as today, and 2) We'll have two sets of anchors to maintain URL compatibility for.

Browsers provide scroll-margin-top natively these days, which would solve the original problem in a different way without the extra elements.