A typical problem encountered when using something like Bootstrap’s fixed-top navbar is that clicking on an interior link often causes that link target to scroll underneath the navbar, hiding it from view.
The fix for this is a bit of a hack, and sometimes you need to adjust things even further.
Targeting the link targets
Sounds redundant, but what I mean is how I want to set some CSS to apply to all the interior link targets.
The way Bootstrap purports to do this (but I haven’t seen it on
versions I’ve been using) is a general selection targetting items with
This works well using a package like Jekyll
with the Kramdown markdown processor which adds an
to every Markdown heading.
(This is SCSS code which uses the
$navbar-height variable defined by
bootstrap. In plain old CSS you’d just use the number.)
So whereever there’s a element with the
id tag now, there’s an
:before section that pushes the item down. It’s
invisibility also means that it won’t cover any links or clickable
items that might be just above the heading.
One problem I did run into was using the table of contents generator in Kramdown:
This creates a list of interior page links, but also puts an
attribute on each link in the list item, so adding this reversed the
effect of the prior “push down”, so that the list bullets aligned with
the list items.