Page navigation with fixed header

Question

I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.

Is there a way I can offset where the page navigation shows up by 80 pixels (down)?

Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.

Answer 1

Well, since no one else had an answer, I fixed it myself.

Here is the fix:

JSFiddle

This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.

Answer 2

The example doesn't show how it works. I fixed it by adding:

#header {
    opacity:0.5;
}
#content-scroller {
    height:120px;
}

Answer 3

You can do that with CSS.

HTML:

<header>Your Header Here</header>
<div id=main>Rest of Content</header>

CSS:

header { position: fixed; height: 80px; }
#main { margin-top: 80px; }

Answer 4

Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.