Anchor and footnotes link too far down

[rtlee9]

Dean - thanks again for the great work. I've added anchors for intra-document references (e.g., "{#header1}") and footnotes (e.g., "[^1]") in my posts, but when you click on the generated link it takes you one row too far down the page -- the top row is cut off by the banner. Is there an easy workaround to resolve this?

Please see the table of contents and/or footnotes in this post for an example. Please see desired footnote functionality here.

Thanks,
Ryan

[daattali]

Hi Ryan, this is an extremely common problem with in HTML that many many websites suffer from. What you're seeing is actually the correct behaviour, but certainly not desireable. What's happening is that because the header is fixed and follows you while scrolling, then the top of the page is actually "hidden" behind the header. So if the header is for example 50 pixels tall, then every internal link will look like it scrolled 50 pixels too much, but it's just because the correct location of the link is behind the header. As far as the HTML /CSS is concerned, you're scrolled to the correct place, it just so happens that there is some other element (the header) covering what you want to see.

There are many various "fixes" to this, none of them are very elegant or good in my opinion so I just leave it. You'll find that most websites that have a fixed header have this problem. One thing you could do is change the CSS of the header to not be fixed, or you could google for this problem and try any of the many solutions people offer. Or just accept it, even though it's a bit annoying. I'm a perfectionist, but I came to terms with this :)

[rtlee9]

Thanks, Dean. I tried a few different iterations of changing the relative positioning in the CSS, but I couldn't get the footnotes to both offset and render correctly. In the end I converted the navbar to default / unfixed by deleting navbar-fixed-top from the first line of _includes/nav.html.

This happened to also solve a separate problem specific to my posts, where the fixed navbar width was initially set on mobile screens to be wider than the screen width for posts containing relatively large HTML iframes.

[daattali]

I did find one solution that works fairly well that you could try. http://stackoverflow.com/a/22655654/3943160

It basically involves adding the following CSS:

:target:before {
    content: "";
    display: block;
    height: 50px;
    margin: -50px 0 0;
}

It might not work on older browsers but you might find that it works for your needs. The number 50 should be changed to whatever height the navbar is (I think it's 50 for beautiful jekyll). Good luck

[rtlee9]

I'll give that a try - thanks again.

[bradyneal]

@rtlee9 Did you end up getting this working? I tried copy and pasting the above css into the bottom of main.css, but it didn't seem to change anything.

I am not a perfectionist, and I view this as essential to the readability of my blog posts (lots of links).

[daattali]

I use the suggestion above in my own site and it works https://github.com/daattali/daattali.github.io/blob/6413e22ec8ffd00aa193a4eb4bf4d45de36824a7/css/main.css#L210-L216

Example: https://deanattali.com/blog/user2017/#scrapeall

[bradyneal]

@daattali Thanks! That works for me! It looks like it was the difference between display: inline-block; and display: block;.

[askdesign]

This worked for me, on a site with a fixed header. Thank you!