Anchor Hash Tag Link Spacing

When you use a fixed menu like the Sticky Menu, the top 40-60 pixels of your site are always covered by the menu. That means when you scroll to hash tag linked items (e.g. Section 1), the element you are scrolling to may get hidden under the menu.

To fix this, there’s an interesting trick you can use. Add the hashlink class to the element with the ID to make sure it is spaced below the menu when it is scrolled to.

.hashlink:before{
    display:block;
    position:relative;
    margin-top: -80px;
    height:80px;
    content: " ";
    visibility:hidden;
}

Of course, you can also change the selector/class to whatever you like.

Change the spacing value (80) to any value you prefer, but make sure the margin and height always net to 0.

Here’s a more in-depth article on the subject: Hash Tag Links That Don’t Headbutt The Browser Window