Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky navigation consumes too much vertical space when zoomed in #316

Open
1 task
theetrain opened this issue Jul 8, 2023 · 1 comment
Open
1 task

Comments

@theetrain
Copy link

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:

image

Thanks for reading!

Link to Minimal Reproducible Example

No response

Participation

  • I am willing to submit a pull request for this issue.
@justin5267
Copy link

justin5267 commented Jul 19, 2023

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants