Adding an offset to an page-anchor

Design help General
1

Hey there,

I followed the instruction from this post and now I have unique div ID’s for each of my collection items, what is wonderful! Anchor-linking works great :tada:! But now I have another problem.

My navbar is covering up the anchor-content. Because my navbar is position:fixed
Is it possible to add an offset for the page anchor? I tried to work with negativ margin and positiv padding but it doesn’t work.

The page with the cms-item page-anchors is called Kalender (eng. calendar). Each calendar-event has it´s own div-id unsing an embed with: <div id="xxx"></div>

Bildschirmfoto 2020-08-02 um 18.52.20
Bildschirmfoto 2020-08-02 um 18.52.20498×584 23.9 KB

And the links which points to the page-anchors are on the home page (image below).

Bildschirmfoto 2020-08-02 um 18.42.03
Bildschirmfoto 2020-08-02 um 18.42.031262×918 62.1 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I know it’s 4 years later but im hoping this can help someone else :)

I think most webflow devs have run into this issue at least once - so I made a really easy to implement solution which takes about 1 minute, and works for all anchor links on your site.

It basically calculates the height of your nav + whatever offset you provide, and then all anchor links will scroll down to that point - so, long story short, no more content cut-offs!

Here’s a link to the video, cloneable, and code snippet!

Hope this helps someone!!