I'm not seeing this behavior in Chrome on Linux. Everything looks fine to me. What browser are you using?

I tried Firefox (nightly and release), Chromium, and IE. You might need to maximize the browser window to ensure that the text under "Host anywhere" is all on one line. Here's a screenshot from Chromium:

I see the incorrect behavior you are describing in your screenshot, but am not able to reproduce it locally.

Yeah, confirmed on Chrome 48 (on Fedora). I can see this bug. Just move your mouse around a bit and it'll sometimes show the header link when you are not over any header at all (and usually it then shows the header below where you are).

Right. If you inspect the element, you can see why:

It's actually much larger than just the line of text, since the ::before pseudo-element adds to the size in order to make the element's top be closer to the beginning of the page. That helps ensure that navigating to the anchor for that element doesn't hide the heading behind the navbar at the top. I'm not sure there's a CSS-only way to do this without causing this issue. You'd either need to use Javascript or modify the HTML.

Cool, yeah, I spotted that too. I think I've fixed it in #844.

Meanwhile, if you use extra_css and add the following, it should fix it for you (and let you confirm my fix which would be super helpful! 🌟).

h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before, h6[id]:before {
    content: "";
    display: block;
    pointer-events: none;
}

Unfortunately, I think that patch will cause the header itself to be hidden by the navbar at the top (which is why that padding/negative-margin trick was there in the first place). I delved into the history, and it used to have a JS implementation: #407.

aha, that's what that height hack was for! We should really use comments.

Yeah, any time there's a negative margin in CSS, there should probably be a comment. :)

Well, that's a shame I was feeling clever for a moment. I'll finish my coffee and think about it for a bit.

A partial fix would be to change the CSS to:

:target::before {
    content: "";
    display: block;
    margin-top: -75px;
    height: 75px;
    pointer-events: none;
}

The above will ensure that all the headers, except the one referred to in the URL's hash, will work fine. You could probably be really tricky and turn the selector into something like body:not(.scrolled) :target::before, and then have JS set .scrolled on the body in an onscroll event handler. That's kind of weird, but arguably less weird than the original JS code.

The real solution is for CSS to have some sort of anchor-offset attribute. :)

Oh, that is neat. I didn't know you could do :target::before - that is an improvement at least until somebody has time to figure out a better fix.

Ok, I think I have a patch for this. It's fairly bizarre, so I need to clean it up and add some comments. Then I'll file a PR.

@d0ugal Ok, the PR is up. I added a comment that hopefully explains all the weird magic I performed. I can also add vendor-specific CSS prefixes as appropriate if you think they're necessary. Here's a compatibility chart: https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Browser_compatibility

Navbar is not a custom feature? How to maintain a custom CSS-code (ex. change navbar backgroundcolor) in a ugly and mixed-bootstrap CSS code?