The fixed top menu obscures in-page anchors

[kd-ods]

For example, when following a link to the entityStatement section of the schema reference:

/schema.html#entitystatement

... the 'EntityStatement' heading is hidden under the top menu.

[odscjames]

https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/ from TimD - supect Sphinx will make applying this very difficult!

[timgdavies]

nods I'm trying to remember where I've grappled with this before: I think it is mostly CSS level fix though?

[odscjames]

You need to change some HTML - that's the bit that I suspect will be hard.

[timgdavies]

Adding this seems to help:

div.section {
    margin-top: -60px;
    padding-top: 60px;
}

any reason we would not want to do that?

[odscjames]

I'm not certain it's always guaranteed to be 60px, but given the use case it doesn't matter if it's slightly off. (We could try and use JS to correct for that but I think that's overkill.) I think this makes that an OK fix! I'll put that in.

[kd-ods]

This problem still exists, but is half resolved. Things are a bit more complicated than first appear. The in-page anchors as used by the menu system use the ids on the section elements, for example:

... is linked to from the menu with... http://standard.openownership.org/en/schema-beta-2/schema/reference.html#entitystatement The headings there look fine and are not obscured by the menu. But when we create explicit links in rst with eg: .. _schema-entity-statement: A new child span element is created at the top of the section with id like: So when we use the nice little :ref: role in the docs to link to relevant sections, this resolves as: http://standard.openownership.org/en/schema-beta-2/schema/reference.html#schema-entity-statement ... and we still have the problem of the menu obscuring the heading. **Possible solution:** * Give .oods-main div.section span:first-child 'display:block; margin-top: -60px; padding-top: 60px;'

[odscjames]

Ok, to duplicate: Go to /schema/concepts.html , go to "Data model overview", click "Entity statement". Seen in Firefox and Chrome.

Where as clicking in top menu, "Data Schema", in side menu "Schema Browser", then "Entity Statement" is fine.

[odscjames]

I tried the suggested CSS, and tho it works it catches other page elements and destroys those, and also does something very weird to links near by! So need to work on that a bit more ....

[rhiaro]

Adding

.oods-main div.section span + h2 {
    display: block;
    margin-top: -3.5rem;
    padding-top: 6rem;
}

and removing the

div.section {
    margin-top: -60px;
    padding-top: 60px;
}

from before, seems to catch the right elements and nothing extra.

Will test in different browsers, then make the change.