Sticky navigation consumes too much vertical space when zoomed in

[theetrain]

What version of starlight are you using?

Haven't used yet

What version of astro are you using?

Haven't used yet

What package manager are you using?

npm

What operating system are you using?

macOS

What browser are you using?

Chrome

Describe the Bug

Starlight, as well as the Astro docs, have a large sticky navigation header that consumes a lot of vertical space. Occasionally, I prefer to zoom in when reading any documentation, and as a consequence I have a lot less room to read than I would otherwise if the navigation header wasn't fixed.

I'm interested in Starlight, though I would like to see this navigation treatment improved; either to keep it at the top of the page, or auto-hide as I scroll down. Check out how navigation is handled on the new Svelte website on desktop and mobile: https://svelte.dev/

Here's a reference with some more considerations: https://adamsilver.io/blog/the-problem-with-sticky-menus-that-appear-on-scroll-and-what-to-do-instead/

And a screenshot of my typical reading experience:

Thanks for reading!

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[justin5267]

The optimal way to display a table of contents (TOC) depends on the type of content being presented and the number of headings on the page, as well as the complexity of their hierarchy.

Svelte offers a modern approach that works well, especially for mobile usage. Docusaurus follows a similar logic with Svelte and even includes a thoughtful "back to top" button, making it a compelling option if you enjoy Svelte. Another popular tool is Materials for MkDocs, which showcases the TOC in a convenient collapsible sidebar.

Starlight provides a distinct feature by displaying the current section's heading at the top of the page, which is particularly useful for complex and lengthy documents. As for concerns about space occupation, it may be possible to reduce the header's height and adjust the background of the TOC header to make it less intrusive.

Thanks for reading!