Hi all. Just finishing off a new one page site with on-page navigation in Foundation 6. My problem is that, whilst the navigation works perfectly on desktops, on mobiles/tablets the nav scrolls down way past the anchor point.
I have used a regular menu stack in Top Bar with visibility set for mobile and tablet. Desktop has a regular menu stack in a 2 column stack.
For anchor points I have used the built in Anchor IDs in individual container stacks.
Don’t know if this is the problem, but it looks like you are using Markdown for the text. The markdown produces an id for headings <h1>,<h2>, etc. The ID’s you are using for at least some of the sections are the same as the generated ones for the headings.
You have for example a div tag and an h1 tag with the same ID. That’s a HTML syntax error.
The id global attribute defines an identifier (ID) which must be unique in the whole document. MDN
Haven’t checked them all but the first few have duplicate Id’s:
Narrowing things down a bit, the issue definitely occurs when using a vertical menu - which I have in the small and medium navigation.
As a test, I switched the vertical menu off so when opening with the hamburger, I now just have horizontal nav items - albeit spanning two lines. Now, it still scrolls past the anchor point but only by a small amount.
So scrolling past the anchor points seems to be determined by the height of the menu. If the vertical menu is 500px tall, the link will scroll past the anchor by about the same amount.
Ok - the issue is easily resolved within the menu stack. There is a setting ‘Offset’ which I had always thought only applied when using a fixed / sticky navigation bar. However, it is also needed when using a vertical menu for on-page navigation.
On mobiles, I have a vertical menu that pretty much fills the screen, and adding a 500px ‘Offset’ solves the problem for me. Given the variety of mobile screen sizes it may be best to use a percentage rem or something rather than fixed pixel height - I’m not sure what is supports but will experiment.
