how to get a fixed header with navigation inside - html

Question

I'm new to the whole HTML and CSS thing, but have been doing okay so far.
Now I need to stick my header to the top, so when scrolling down it stays to the top and the other content is scrolled through.
I've been googling and searching a lot, and cannot find the best solution and I'm hoping you can help me!
Just for info I'm using the 960 grid.
Here is the code:
<div class="container_12">
<header class="fixed">
<img src="img/logolangt.jpg" alt="MB it logo" class="grid_12"/>
<nav class="grid_12" id="mainnav">
<ul>
<li>Services</li>
<li>Career</li>
<li>Clients</li>
<li>About</li>
</ul>
</nav>
<nav class="grid_12" id="servicesnav">
<ul>
<li>HCM</li>
<li>SAP</li>
<li>SuccessFactors</li>
<li>Support</li>
</ul>
</nav>
</header>
And here is the CSS code:
.container_12 {
background: white;
}
/*
**************
* =header
**************
*/
header img {
padding: 20px 0 20px 20px;
}
/*
**************
* =mainnav
**************
*/
#mainnav {
top: -3px;
background-color: #26719b;
font-size: 1.8em;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
position:relative;
height:40px;
font-family: "Segoe UI";
padding: 0 0 0 20px;
text-align: center;
border-radius: 10px;
}
#mainnav ul li {
margin-right: 50px;
text-align: center;
display: inline;
}
#mainnav li a {
color: white;
text-decoration: none;
text-align: center;
padding: 1px 16px 8px 16px;
}
nav li {
display: inline;
}
#mainnav li a:hover, .selected {
background: #f7a634;
border-radius: 5px;
}
/*
**************
* =subnavs
**************
*/
#servicesnav, #careernav, #clientsnav, #aboutnav {
font-size: 1.3em;
font-weight: bold;
background-color: #f7a634;
width: 430px;
height: 31px;
display: inline-block;
padding-top: 4px;
margin-top: -3px;
border-radius: 10px;
}
#servicesnav li a {
color: white;
text-decoration: none;
}
#servicesnav ul li {
padding-top: 20px;
}
#careernav {
margin-left: 180px;
}
#careernav li a {
color: white;
text-decoration: none;
}
#careernav ul li {
padding-top: 20px;
margin-left: 80px;
}
#clientsnav {
margin-left: 360px;
}
#clientsnav li a {
color: white;
text-decoration: none;
}
#clientsnav ul li {
padding-top: 20px;
margin-left: 90px;
}
#aboutnav {
margin-left: 520px;
}
#aboutnav li a {
color: white;
text-decoration: none;
}
#aboutnav ul li {
padding-top: 20px;
margin-left: 54px;
}
/*
**************
* =general
**************
*/
p, h1, h2, h3 {
font-family: "Segoe UI", sans-serif;
}
.sections h2 {
text-align: center;
font-weight: bold;
font-size: 1.6em
}
/*
**************
* =main
**************
*/
.main .grid_8 {
margin-top: 20px;
}
/*
**************
* =services-->
**************
*/
#hcm, #sap, #successfactors, #support {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#sap {
background-color: #f7a634;
}
#successfactors {
background-color: #26719b;
}
#support {
background-color: #f7a634;
}
/*
**************
* =career-->
**************
*/
#workingat, #jobs {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#jobs {
background-color: #f7a634;
}
/*
**************
* =clients-->
**************
*/
#clients, #testimonials {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#testimonials {
background-color: #f7a634;
}
/*
**************
* =aboutus-->
**************
*/
#values, #partnerships, #contact {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#partnerships {
background-color: #f7a634;
}
#contact {
background-color: #26719b;
Thank you very much!
--Edited to include more CSS code --

Answer 1

You just need to put this in your css.
#mainnav {
position:fixed;
}
Take a look at http://jsfiddle.net/qxXXw/ and you also might want to have a look at http://www.w3schools.com/css/css_positioning.asp to get a better understanding about css positions, I know it took me awhile to figure it out at first.