Changing the Viewport Height When Link-Jumping

Sometimes fixed menus or headers can overlap our content


When clicking on a #link that jumps to a particular part of a page, sometimes we need to take into account the viewport. If we have a fixed header, say 80px in height, our content will be overlapped by the header. To fix this, we can use some CSS magic:

.jump_link:before {
    height: 80px;      /* Same height as your header */
    margin-top: -80px; /* Again */
    content: " ";
    display: block;
}

Now every link with the class of jump_link will hit 80 pixels higher on the screen, allowing content to be visible. Modify per your needs.