twbs
Navbar hides initial content when jumping to in-page anchor
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
This issue was already reported and locked at #1768.
Basically, when you jump to an in-page anchor, the target is displayed behind the navbar.
A fix (using scroll-margin-top) was suggested in passing at https://github.com/twbs/bootstrap/pull/30273#issuecomment-598609487
Is it worth adding some docs to the Navbar section, to recommend adding a custom rule like
[id] {
scroll-margin-top: <your navbar height here>;
}
Or is a more general fix possible ?
Reduced test cases
https://codepen.io/forthadena/pen/oNoMwQd
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox
What version of Bootstrap are you using?
5.1.3
It's been discussed already so I don't think it'll land. FWIW it's been implemented in a branded fork called Boosted, through a Sass option.
@mdo here's the related PR in Boosted. We may introduce this option, being falsy by default. Could be useful for people using sticky-top navbars.
Actually I think we had this originally until we added the :root thing, which I removed in favor of another approach in #35736: https://github.com/twbs/bootstrap/pull/35736/commits/4d1d58c0ad5fc6d0ffcf2cc7f1a0532d43cca1f9.
I'm more than happy to use either approach in our docs (but not elsewhere by default), provided it works well :).
The PR you mention targets our docs, but with our default build one can be hitten by this behavior if they use .fixed-top or .sticky-top on their header or navbar.
This is why I originally introduced the Sass option in Boosted: for such case, it unveils some room for focused elements scrolling into view.
Tune in to this https://assemble-illicit1.github.io/a4QEWi3f2hA/ explanation
