Fixed left nav & fixed header issue

Question

At this site I have a fixed nav and header when user clicks a title on nav it takes them to proper content box. Yet when they click from "Just Kids," to "Home," the top content is hidden behind the fixed header. Also you will notice this happens when the page loads; content is hidden behind the fixed header.

I've tried a few things; added a div with height to push content down as seen here but here when page loads the right content area is pushed down.

Has anyone seen a site like this before or have a suggestion on how to fix the above?

Answer 1

Anchors behave this way. When you jump to an anchor it's going to attempt to go to the top of the screen.

Seems like you're using Javascript already for that smooth scroll effect. During the effect, instead of scrolling to the anchor, prevent the default action, get the top offset of the anchor, and scroll to (that top offset - the header height)