html - Creating a Navigation Bar FIXED on the top of screen

Question

I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, e.g. home, about us and so on.

I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen.

Also, how it would be possible to add a background colour just to the navigation system?

Thank you.

Answer 1

Try something like this:

In between the tags in the HTML:

<div id='header'>NAVIGATION LINKS</div> 

and in the CSS put:

#header{
   padding:10px;
   height:20px;
   position:fixed;
   width:100%;
}

Here's a JSFiddle: http://jsfiddle.net/MGumH/