I’m deciding how to handle the top navigation bar on my Hugo-based blog and would appreciate some input.
Right now, the menu hides when the user scrolls down, which gives more space for reading and keeps the content in focus. However, this behavior requires extra complexity. It involves tracking scroll efforts and using JavaScript for smooth show/hide (fade in/out), which adds some overhead.
The alternative is to keep the menu fixed at the top at all times, both on desktop and mobile. That simplifies the implementation but permanently takes up screen space, especially noticeable on smaller screens.
From your experience, what’s the better approach?
- Keep the menu always visible (fixed)
- Hide it on scroll to maximize reading space
Any insights, trade-offs, or best practices would be helpful.
If you want to see the current implementation in action, you can check it here: https://denshub.com/