Page Navigation With Fixed Header

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

Solution 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.

Solution 2:

You can do that with CSS.

HTML:

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

CSS:

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

Solution 3:

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/.

Solution 4:

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

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