This is a Bug Report
Problem:
The navbar is position: fixed and 106px tall, and nothing compensates for it when the browser scrolls to a fragment. So following any in-page anchor lands the target heading underneath the navbar, completely hidden.
Measured on https://www.kubeflow.org/docs/started/introduction/#what-is-kubeflow:
nav.js-navbar-scroll position: fixed top: 0 bottom: 106
#what-is-kubeflow top: 0 bottom: 119
The heading is covered by 106px of navbar. Neither compensation property is set anywhere on the site:
html { scroll-padding-top: auto } /* i.e. unset */
h2 { scroll-margin-top: 0px }
This is not limited to typed URLs. It happens through the site's own navigation: on /docs/components/pipelines/overview/, clicking "Why Kubeflow Pipelines?" in the right-hand table of contents puts that heading at top: 0, hidden by the same 106px. Every heading anchor and every table-of-contents entry in the docs behaves this way.
The reader ends up looking at the middle of a section with no visible heading, having just clicked the heading's name. It is most disorienting for anyone using magnification, where the navbar takes proportionally more of the viewport, and for anyone who navigates by heading and then looks to confirm where they landed.
Proposed Solution:
One declaration in assets/scss/_styles_project.scss, so the browser leaves room for the fixed navbar when it scrolls to a fragment:
html {
scroll-padding-top: 106px; // height of the fixed .js-navbar-scroll
}Better still, drive it from the same variable the navbar height comes from, so the two cannot drift apart. scroll-padding-top is the modern, single-declaration answer to this and needs no JavaScript.
Page to Update (provide the full path):
https://www.kubeflow.org/docs/started/introduction/#what-is-kubeflow
https://www.kubeflow.org/docs/components/pipelines/overview/ (via the right-hand table of contents)
Site-wide rather than page-specific, so the fix belongs in the site stylesheet.
Component/Kubeflow Version:
Website. layouts/partials/navbar.html in this repo, not inherited from Docsy. scroll-padding does not currently appear anywhere in the repository.
Additional Information:
Verified in Chromium at 375px, 1280px and 1920px. The navbar stays position: fixed at all three, so this is not viewport-specific.
This may also be what #4400 was reaching for. That issue reports the header overlapping content on the homepage, which I could not reproduce at any of those three widths, and neither could another contributor in July: at scroll-top the h1 sits at 176px against a navbar ending at 106px, a 70px gap. Content hidden behind the navbar after following an anchor is a different mechanism and does reproduce reliably.
This is a Bug Report
Problem:
The navbar is
position: fixedand 106px tall, and nothing compensates for it when the browser scrolls to a fragment. So following any in-page anchor lands the target heading underneath the navbar, completely hidden.Measured on
https://www.kubeflow.org/docs/started/introduction/#what-is-kubeflow:The heading is covered by 106px of navbar. Neither compensation property is set anywhere on the site:
This is not limited to typed URLs. It happens through the site's own navigation: on
/docs/components/pipelines/overview/, clicking "Why Kubeflow Pipelines?" in the right-hand table of contents puts that heading attop: 0, hidden by the same 106px. Every heading anchor and every table-of-contents entry in the docs behaves this way.The reader ends up looking at the middle of a section with no visible heading, having just clicked the heading's name. It is most disorienting for anyone using magnification, where the navbar takes proportionally more of the viewport, and for anyone who navigates by heading and then looks to confirm where they landed.
Proposed Solution:
One declaration in
assets/scss/_styles_project.scss, so the browser leaves room for the fixed navbar when it scrolls to a fragment:Better still, drive it from the same variable the navbar height comes from, so the two cannot drift apart.
scroll-padding-topis the modern, single-declaration answer to this and needs no JavaScript.Page to Update (provide the full path):
https://www.kubeflow.org/docs/started/introduction/#what-is-kubeflow
https://www.kubeflow.org/docs/components/pipelines/overview/ (via the right-hand table of contents)
Site-wide rather than page-specific, so the fix belongs in the site stylesheet.
Component/Kubeflow Version:
Website.
layouts/partials/navbar.htmlin this repo, not inherited from Docsy.scroll-paddingdoes not currently appear anywhere in the repository.Additional Information:
Verified in Chromium at 375px, 1280px and 1920px. The navbar stays
position: fixedat all three, so this is not viewport-specific.This may also be what #4400 was reaching for. That issue reports the header overlapping content on the homepage, which I could not reproduce at any of those three widths, and neither could another contributor in July: at scroll-top the
h1sits at 176px against a navbar ending at 106px, a 70px gap. Content hidden behind the navbar after following an anchor is a different mechanism and does reproduce reliably.