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

Make book header always visible #675

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

welcome-me
Copy link

@welcome-me welcome-me commented Dec 31, 2024

I am using this theme for a book with long chapters. Scrolling to the top of the page on mobile devices to access the table of contents and site navigation is not user friendly. This PR makes the .book-header sticky so that the site navigation and table of contents can be accessed from any place on the page. 🥳

The header is accessible from partways down the page.
image

Notes:

  • The basic functionality does not require Javascript to work.
  • However, Javascript adds the following UX improvements:
    • The Table of Contents is closed when selecting the site navigation. On small devices with a large table of contents, there was no place to tap to close the site navigation menu. By closing the TOC when opening site navigation, we make sure there is a place to tap to close the site navigation.
    • The Table of Contents is closed when tapping a heading. This is done so that the we could set scroll-margin-top to a value that would guarantee the heading was visible at the top of the viewport.

image

@welcome-me welcome-me changed the title Add sticky book header Make book header always visible Dec 31, 2024
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

Successfully merging this pull request may close these issues.

1 participant