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

twitter logo github logo ・1 min read

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)

Linked markdown section:

<a name="anchorname"></a> # Normal Markdown Title Here(ends up hidden)
twitter logo DISCUSS (1)
markdown guide
 

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.

Classic DEV Post from Jan 25

What is your "Coder/Language Fit"

Marcos Maia profile image
I am an experienced Developer, Trainer and Speaker. Eager to learn and share knowledge. A bit introspective. Keep coding. Be humble. Help others.

By the community, for the community.

DEV is open source, committed to the open web, and quickly becoming the biggest world's biggest network of software developers.

Get started now ❤️