Skip to content

Resolves "H1's are hidden when you access them with an anchor"

Sarah German requested to merge 1115-lost-h1s into main

What does this MR do and why

Currently, if you click a link that takes you to an anchor on a page title, that title is obscured by the navbar.

For example, go here: https://docs.gitlab.com/ee/user/permissions.html#permissions-and-roles. You'll only see the page title if you scroll up a bit due to the sticky nav bar.

Since our Algolia search results point to these anchor links, this behavior impacts anyone who clicks an h1-level search result.

To fix this, this MR uses the same method on h1's that we use to avoid this on other headings: apply a negative margin to shift the viewport, and for these, add padding to maintain the desired spacing between the header and the navbar.

Closes #1115 (closed)

Screenshots

Before After
image image

How to test

  1. Use a link with an anchor to an h1 to visit a page in the review app, like this: http://1115-lost-h1s.35.193.151.162.nip.io/ee/user/application_security/#secure-your-application
  • You should see the page title without needing to scroll up
  • The spacing between the header and the nav bar should look the same as it does on the production site
Edited by Sarah German

Merge request reports