Menu icon Foundation
Anchor menu for one page: wrong scrolling (F6)

Hello and good morning!

I built a one-page setup with an anchor menu. The menu links to each section of that page via an anchor; normal thing. But the links show some strange behaviour: It is not exactly the top of each section but somewhere the middle of the section that is scrolled to on the screen (on mobile screens anything works fine, btw.).

I stripped the page down to the basic content, with HTML, but this misbehaviour still happens. Has anybody an idea what I might have done wrong?

EDIT: Link to test site deleted.

anchormenuone-page

Hello and good morning!

I built a one-page setup with an anchor menu. The menu links to each section of that page via an anchor; normal thing. But the links show some strange behaviour: It is not exactly the top of each section but somewhere the middle of the section that is scrolled to on the screen (on mobile screens anything works fine, btw.).

I stripped the page down to the basic content, with HTML, but this misbehaviour still happens. Has anybody an idea what I might have done wrong?

EDIT: Link to test site deleted.

Magda Jans over 3 years ago

I noticed that the anchor menu works perfectly well when I delete the sticky class from my main menu. Folks, there are many issues with the stickiness, alas! After the update to 6.1.2 a sticky top in combination with an off canvas works fine. Great, thanks for fixing this!

But maybe this is something somebody could check:

top bar + off canvas + anchor menu (sub menu).

Any ideas?

Rafi Benkual over 3 years ago

Hi Magda,
What do you mean by anchor menu? Is it Magellan?

You can add an offset to magellan to compensate for the height of the menu
http://codepen.io/rafibomb/pen/LGeZYr

Magda Jans over 3 years ago

Hi Rafi,

no, it is something as simple as this:

<ul class="menu float-right">
  <li class="menu-link"><a href="#1">Projects</a></li>
  <li class="menu-link"><a href="#2">Publications in English</a></li>
  <li class="menu-link"><a href="#3">About me</a></li>
</ul>

In the one page setup it jumps down to the section with the respective ID (#1, #2, #3 - well it should link to it but it does not properly ). In my example it is the right sub menu with the purplish background.

PS: Thanks for the code, I will check that. Yes that's an anchor menu, too.

Magda Jans over 3 years ago

@Rafi Benkual

This did it, great! Thanks a lot. In my case it is this:

<div>
  <nav data-magellan data-bar-offset="60">
    <ul class="menu float-right">
    <li class="menu-link"><a href="#1">First Arrival</a></li>
    <li class="menu-link"><a href="#2">Second Arrival</a></li>
    <li class="menu-link"><a href="#3">Third Arrival</a></li>
    </ul>
  </nav>
</div>

What I still wonder about is why my very simple HTML anchor menu cannot walk without any JS crutches.

Rafi Benkual over 3 years ago

Awesome! Glad you got it!

It can, but there is no # in the destination id. The hash is only used on the link that is clicked.

Magda Jans over 3 years ago

Hm, so sorry - I think I was a bit enthusiastic. The code, as I modified it, works for large screens but not for small and medium, at least not on my site. What does this do?

data-bar-offset="60"

As far as I can see it sets a top margin. But since this value is not relative the margins for smaller screens are too big.

EDIT: Link to test site deleted.

Rohit Khanna about 1 year ago

You can also use the data-offset="100"