Refactor spacing styles around the header
What does this MR do and why?
Refactors CSS around the navbar and headers. Spacing had gotten a little weird, especially when the banner was present.
Most of the change here is to use scroll-margin-top in CSS to offset elements relative to the sticky navbar. This is a little more straightforward than setting negative margins on headers and including extra JavaScript to scroll down the page for anchors. This MR also clears up issues with the banner taking up vertical space even when it was not visible.
Screenshots, screen recordings, or links to review app
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Compile the site -
Browse around at different widths, and with/without the banner present (you can manipulate banner visibility by adjusting the value of the showBannercookie with dev tools)
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Edited by Sarah German