areweloongyet icon indicating copy to clipboard operation
areweloongyet copied to clipboard

CSS: Consider replacing `position: sticky` in `.navbar--fixed-top`

Open xry111 opened this issue 1 year ago • 1 comments

The problem with position:sticky is if using "#label" in URL to jump to a label, the actual position of the label will be covered up by the top bar.

FWIW: I found this issue when debugging a similar issue in LFS and BLFS books. We plan to do this change in our CSS for LFS and BLFS, maybe you can use it as a reference:

 div.navheader {
   border-bottom: 1px solid #dbddec;
-   position: sticky;
-   top: 0;
+  position: fixed;
+  top: 0;
+  left:0;
+  right:0;
+  bottom:auto;
+  height:7.3em
 }

xry111 avatar Jan 24 '24 18:01 xry111

For example, when accessing https://areweloongyet.com/docs/contrib/natlang-style-guide#user-content-fnref-politics, the referred sentence is covered up. Strangely it does not happen if jumping to a title (like https://areweloongyet.com/docs/contrib/natlang-style-guide#%E7%AE%80%E8%80%8C%E8%A8%80%E4%B9%8B).

xry111 avatar Jan 24 '24 18:01 xry111