On page anchor links landing wrong place

Foundation 6.6.3 with sticky top bar in use and magellan in content access jumper.

Magellan works as expected. But if I make regular anchor link (no magellan) in to content and click link it scrolls little bit over defined anchor (id attribute).

Tried to move target id to upper cantainers, even made extra div wrapper to target id, it scrolls a little bit upper, but still landing is not correct.

Can you make a CodePen demonstrating this?

I want to see your Magellan working, as I can’t get it to highlight the menu item correctly. I’ll see if I can figure out your issue.

Sorry, but codepen could be tricky. Never used it. Note that I`m using CSS version of foundation.

BUT site is live https://pk.websivut.info/. It`s development site and finnish language.

Anchor with Magellan is used by content access jumper and it is hidden (only sr class) but you can test it by keyboard (tab+enter) it jumps to content.

Then in main page there`s Orange Callout with link (Ota yhteyttä niin jutellaan lisää!). That anchor link should jump to “Ota yhteyttä” (contact form inside accordion content).

Now anchor link scrolls too down and target not even show.

In mobile offset is not so bad, but not accurate in mobile too.

Hope this can help!

Your site it too complicated to debug (and not in English makes it harder for me). Go to https://codepen.io and create a free account. You can then add an HTML example of what does not work for you, you don’t need the full website, just the smallest section of html that does not work. Search for other Foundation examples in CodePen to see how it works (you need to include the CSS and JS files in the Settings section).

This is my example of Magellan that does not track location on the menu.

Ok. There is lot of this kind of (not foundation related) solutions. Both CSS or JS, but none have worked so far.

Maybe I try Codepen, but this moment I don`t have time for that.