Background

This project is built with Hugo and uses the Minimal Hugo theme.

This post is part of an ongoing effort to tailor the theme over time.

The Problem

When clicking on-page links the top of the content is covered by the site’s fixed header.

We want linked content to display just below the fixed header.

The Process

This is a common problem with a long history, so a web search quickly led to some helpful discussions of the issue:

• Fixed Headers, On-Page Links, and Overlapping Content, Oh My! by Chris Coyier on CSS-Tricks.com
• This answer (and its comments) on StackOverflow.com

The Solution

To implement the solution mentioned in those articles a simple addition was made to the css.html file in the project’s /static/css/ directory.

/*  General  */

html {
    scroll-padding-top: 70px; /* This allows on-page linked content to appear below fixed headers.  The value should be the height of the sticky header. */
}

With that change on-page linked content now appears below the fixed header as expected.