Simple CSS fixed header

Question

What is the easiest way to make the following page header a fixed header? http://presentationtube.com/header.php Should I move the Menu elements in the header?

Answer 1

the easiest way:

#templatemeo_header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: 70px;
}

Answer 2

CSS:

#templatemo_header_wrapper {
     position:fixed;
}

If that is not correct you will need to elaborate on your question.

EDIT

I would like to expand on this. There is extra markup that is not needed.

The current css looks like this:

#templatemo_header_wrapper {
  width: 100%;
  height: 65px;
  margin: 0 auto;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}

As the body is already set at margin:0 and padding:0 you do not need to specify top and left coordinates for the #templatemo_header_wrapper. So to avoid writing additional css you can change the element to this:

#templatemo_header_wrapper {
  width: 100%;
  height: 65px;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
  position: fixed;
}

I've removed the margin property as this does not apply here. You can also dispense with the height property. Sometimes it is useful to set height for a fixed position element. But as you have child elements that also have height specified (and/or padding margins) this will naturally add height to the parent container as needed.

So the final markup could look like this:

#templatemo_header_wrapper {
  position: fixed;
  width: 100%;
  background: #19446a url(images/templatemo_header_bg_65_ora.jpg) repeat-x;
}

Answer 3

#templatemo_header_wrapper {   
 top: 0px; position: fixed
 }

fixed at top 0