1

Possible Duplicate:
How do I make a Div move up and down while Scrolling the page?

I want to do a 100% width header navigation that stays anchored to the top of the site even when the user scrolls vertically. Kind of like this site:

http://www.hollencrest.com/

I would google it but I can't come up with the correct term.

So what is the easiest way to do this?

Community
  • 1
  • 1
Ryan
  • 5,883
  • 13
  • 56
  • 93

2 Answers2

6

Simply set the header's position to fixed:

header {
    position: fixed;
    top: 0; left:0; right: 0;
}

Here's the fiddle: http://jsfiddle.net/M9RHn/


P.S. Remember to offset your page content from the top, so that the header does not cover any content before the user starts scrolling.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
2

add these properties in header classes

.header {position: fixed; top:0; z-index: 99; width: 100%;}

Manish Sharma
  • 1,670
  • 14
  • 20