Search code examples
cssjekyll

Jekyll HTML heading jump with # scroll is hidden behind header/nav

My Site: https://physicys.github.io/Test-2

Site source: https://github.com/Physicys/physicys.github.io

My site automatically generate a Table of Contents based on headings, When I click on the ToC to jump to specific headings, the heading is hidden behind site-header/site-nav.

For example, I'm in "Usage" row but the page doesn't show "Usage" heading. image-1

I can see it if I scroll up little bit but then the ToC wil highlighted different row. image-2

I can see the heading is behind the site-header when I remove the site-header completely. image-3

Expected behaviour: when I click in layout row it will show the layout heading in the content directly (layout row is highlighted and layout heading is visible) pretty much like this site https://0xdf.gitlab.io/2022/12/17/htb-support.html

image-4

I have been messing around with the css site-header/site-nav but nothing work so far.

Solution

  • In the example you gave, this was achieved using kinda tricky solution

    CSS:

        .post-content h1, .post-content h2 {
    text-align: left;
    height: 143px;
    position: relative;
    color: #DB2C17;
    }

    h2#usage::after {
    content: "usage";
    position: absolute;
    bottom: 0;
    left: 0;
    }

    HTML:

    <h2 id="usage">&nbsp;</h2>

    this worked for me,

    He added height and ::before, in other words, he has the same problem as you, so he made extra space and a fake text at the bottom to be shown as it is spaced perfectly.