WordPress block theme fragment offset

A quick fix for the #id offset in the wordpress block editor

I just solved a slight visual bug on a wordpress site (tcpinball.org) with id permalinks.

I recently added made the site header sticky on there, which started covering the heading you jumped to when clicking a fragment id.

Here’s the solution:

[id] {
    scroll-margin-top: 80px;
}

You can add this CSS snippet in the block editor with the “Additional CSS” option in the global styles panel.

Easy fix without editing any theme or plugin files!

One reply on “WordPress block theme fragment offset”