Id doesn't work right the first time :(

Sure.

The issue happens because of how your site’s layout works. Let me explain:

When you’re on the very top (haven’t scrolled down) the menu’s position is relative. When you scroll down a bit, the menu becomes fixed. The problem is that the relative menu occupies an area in the document (92 pixels) but when it becomes fixed, this area gets completely removed. This means that the overall body height changes the moment the menu becomes fixed.

The plugin script cannot re-calculate where to scroll while scrolling is underway! This is why when you click a link while the menu is relative, page scrolling is off by few pixels. The second time you click the link, page scrolling is “correct” as the link is in the fixed menu.

Hope all this makes sense 🙂

Now, the solution is to prevent the document from changing its total height when the menu changes its position property (relative/fixed). The easiest/most efficient way to do this is by adding the following to your theme’s CSS:

.navigation_menu.affix + * {
    margin-top: 92px;
}

The above gives the element which sits next to the fixed menu a top margin of 92 pixels (the amount of area previously occupied by the relative menu).

This fixes the scrolling position issue and removes the unwanted layout “gap” when scrolling the page!
You can test it by slowly scrolling the page until menu becomes fixed. Without the CSS rule there’s a gap. Adding it, makes scrolling smooth (as it should be in the first place).

I checked your link again and the rule is not set. I cannot find it when inspecting the page… Are you sure you placed it in your CSS? Maybe you have caching enabled?

The rule does work (I know because I’m testing it directly in browser’s dev tools on your site).

Let me know.

Same principle:

.site-header + * {
    margin-top: -50px;
}

.site-header.sticky + * {
    margin-top: 116px;
}

@media screen and (min-width: 768px){

    .site-header + * {
        margin-top: 0;
    }

    .site-header.sticky + * {
        margin-top: 131px;
    }

}