<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example: Fixed Navigation at the Top of the Page</title>
<style>
body {
font: small/1.3em Arial, Helvetica, sans-serif;
background-color: #888; }
h1 {
margin: 0 0 1em 0;
line-height: 1em; }
#wrap {
width: 500px;
margin: 0 auto;
padding: 50px 20px 20px 20px;
border: 1px solid #ccc;
background-color: #fff; }
ul#nav {
position: fixed;
top: 0;
list-style: none;
margin: 0;
padding: 0; }
ul#nav li {
float: left; }
ul#nav li a {
display: inline;
float: left;
border-right: 1px solid #fff;
padding: 8px 5px 3px 5px;
line-height: 2em;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none; }
ul#nav li a:hover {
background-color: #075a97; }
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Our Archives</a></li>
<li><a href="#">Free Stuff</a></li>
</ul>
<h1>Fixed Navbar at the top of the page</h1>
<p><a href="/harnessing-positioning-1/">Go back to the article.</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus purus nec sem. Proin egestas. Suspendisse potenti. Nullam vestibulum, leo eu rhoncus tempus, nulla mi aliquet turpis, ut tristique dolor orci id odio. Sed faucibus, magna in iaculis accumsan, magna est convallis dui, in pulvinar nisl arcu eu ante.</p>
<p>Suspendisse purus metus, aliquam at, porttitor vitae, elementum sed, purus. Pellentesque elementum aliquet dolor. Fusce convallis magna vitae justo. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id diam. Mauris rhoncus sem at ante. Pellentesque volutpat. Nunc ac pede. Aliquam consequat. Duis mattis faucibus ante. Suspendisse potenti. </p>
<p>Pellentesque viverra mattis nulla. Donec imperdiet massa non nisl. Maecenas non orci et dolor dictum iaculis. Morbi id tellus. Curabitur lacinia metus sit amet nisl. In vitae sapien. Cras auctor sapien. Proin ut magna ut magna dictum pellentesque. Proin tincidunt pede vitae justo. In adipiscing. Nulla nunc ante, nonummy sit amet, hendrerit ac, tincidunt vel, nunc. Aliquam vitae elit eget orci luctus porta. In cursus condimentum massa. Morbi pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt, erat pretium imperdiet condimentum, ante leo luctus nulla, in lobortis elit justo ac libero. </p>
<p>Pellentesque viverra mattis nulla. Donec imperdiet massa non nisl. Maecenas non orci et dolor dictum iaculis. Morbi id tellus. Curabitur lacinia metus sit amet nisl. In vitae sapien. Cras auctor sapien. Proin ut magna ut magna dictum pellentesque. Proin tincidunt pede vitae justo. In adipiscing. Nulla nunc ante, nonummy sit amet, hendrerit ac, tincidunt vel, nunc. Aliquam vitae elit eget orci luctus porta. In cursus condimentum massa. Morbi pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt, erat pretium imperdiet condimentum, ante leo luctus nulla, in lobortis elit justo ac libero. </p>
<p>Suspendisse purus metus, aliquam at, porttitor vitae, elementum sed, purus. Pellentesque elementum aliquet dolor. Fusce convallis magna vitae justo. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id diam. Mauris rhoncus sem at ante. Pellentesque volutpat. Nunc ac pede. Aliquam consequat. Duis mattis faucibus ante. Suspendisse potenti. </p>
<p>Pellentesque viverra mattis nulla. Donec imperdiet massa non nisl. Maecenas non orci et dolor dictum iaculis. Morbi id tellus. Curabitur lacinia metus sit amet nisl. In vitae sapien. Cras auctor sapien. Proin ut magna ut magna dictum pellentesque. Proin tincidunt pede vitae justo. In adipiscing. Nulla nunc ante, nonummy sit amet, hendrerit ac, tincidunt vel, nunc. Aliquam vitae elit eget orci luctus porta. In cursus condimentum massa. Morbi pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt, erat pretium imperdiet condimentum, ante leo luctus nulla, in lobortis elit justo ac libero. </p>
<p>Pellentesque viverra mattis nulla. Donec imperdiet massa non nisl. Maecenas non orci et dolor dictum iaculis. Morbi id tellus. Curabitur lacinia metus sit amet nisl. In vitae sapien. Cras auctor sapien. Proin ut magna ut magna dictum pellentesque. Proin tincidunt pede vitae justo. In adipiscing. Nulla nunc ante, nonummy sit amet, hendrerit ac, tincidunt vel, nunc. Aliquam vitae elit eget orci luctus porta. In cursus condimentum massa. Morbi pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt, erat pretium imperdiet condimentum, ante leo luctus nulla, in lobortis elit justo ac libero. </p>
<p>Suspendisse purus metus, aliquam at, porttitor vitae, elementum sed, purus. Pellentesque elementum aliquet dolor. Fusce convallis magna vitae justo. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id diam. Mauris rhoncus sem at ante. Pellentesque volutpat. Nunc ac pede. Aliquam consequat. Duis mattis faucibus ante. Suspendisse potenti. </p>
<p>Suspendisse purus metus, aliquam at, porttitor vitae, elementum sed, purus. Pellentesque elementum aliquet dolor. Fusce convallis magna vitae justo. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id diam. Mauris rhoncus sem at ante. Pellentesque volutpat. Nunc ac pede. Aliquam consequat. Duis mattis faucibus ante. Suspendisse potenti. </p>
</div>
</body>
</html>