Keeping a header always in view

Question

I am designing my website and I\'m trying to find a way to keep a header always in the screen.

For an example, take a look at this extra long page on Wikia.com. Noti

Answer 1

If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

Or just to the of the the page:

.top-bar {
  margin: 0;
  width: 100%;
}