Offsetting anchors to adjust for a fixed header.

Andrei Valentin Popa — Fri, 18 Aug 2023 17:33:07 +0000

So, you got your nice little sticky header, it looks good but any #to-my-title or #to-my-reference bits are linking to areas that are covered by the header.

This is a common problem that is a bit difficult to solve but here is how I did it in my Astro project.

/* Offsetting anchor to adjust for fixed header */
a[aria-describedby="footnote-label"]:target {
    padding-top: 50% !important;
}

h1[id]:before,
h2[id]:before,
h3[id]:before,
h4[id]:before,
h5[id]:before,
h6[id]:before {
    display: block;
    content: " ";
    margin-top: -75px;
    height: 75px;
    visibility: hidden;
}

This code might look complicated, that's because it is.

The first rule applies to any link (a) that has an attribute aria-described by with the value footnote-label and is the target of the current URL (meaning it has a hash fragment that matches its id). This rule adds a 50% padding-top to the link, which means it will place it in the middle of the screen.

The second rule applies to any heading that has an id attribute. This rule adds a pseudo-element (:before) to the heading, which is an invisible element that is inserted before the heading’s content. This pseudo-element has a height of 75px and a negative margin-top of 75px, which means it will occupy the same space as the heading but will not affect its position or layout, placing the "target" of the link actually a little bit above the actual heading.

How to add hard breaks to your Astro Blog

Andrei Valentin Popa — Fri, 18 Aug 2023 15:12:07 +0000

In my opinion, soft breaks are absolutely useless, would you write your content in markdown and not add space between paragraphs?

Besides that some content has to be displayed with hard breaks and it's annoying to add a <br> or other escape character.

Astro uses remark to render markdown so if you want to add hard breaks you have to install the remark-breaks plugin.

npm install remark-breaks

Then modify astro.config.mjs and enable the plugin.

import remarkBreaks from 'remark-breaks';

export default defineConfig({
  markdown: { remarkPlugins: [remarkBreaks] },
});

DEV Community: Andrei Valentin Popa

Offsetting anchors to adjust for a fixed header.

How to add hard breaks to your Astro Blog