DEV Community

Marcos Maia
Marcos Maia

Posted on

Markdown anchor in dev.to post links properly but element ends up behind the top nav-bar.

In markdown, you can use an anchor to link specific sections of your post this naturally also works here in Dev.to posts but when trying to use it the title of the anchored section ends up hidden behind the navbar, just like like this example below:

Anchor to section below.

# This Title will end up hidden behind the nav-bar

From here it's visible.

What's the best solution or workaround for this while writing here at dev.to?

For clarity, the code for how to replicate it:

to create the link:

[Anchor to section below](#anchorname)
Enter fullscreen mode Exit fullscreen mode

Linked markdown section:

<a name="anchorname"></a> # Normal Markdown Title Here(ends up hidden)
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
elmuerte profile image
Michiel Hendriks

It's a really old browser bug which nobody ever bothered fixing. There are a lot of dirty workarounds, which generally have an effect on the layout.

The problem is that the browser will scroll so that the anchor's top left coordinate is at the top of the content window. But if you have a fixed header up there, your anchor point is behind it.

So basically you should not use fixed headers, or resort to ugly hacks.