Navbar fixed on the top of HTML page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Navbar fixed on the top of HTML page

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from w  w  w.  ja va  2  s. co  m-->
   position:relative;
   padding-top:41px;
}

nav {
   position:fixed;
   top:0;
   left:0;
}

nav ul {
   list-style:none;
   margin:0;
   padding:0;
}

nav li, nav a {
   float:left;
}

nav a {
   height:41px;
   line-height:41px;
   padding:0 11px;
   background:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
   </ul> 
  </nav> 
  <!-- blah blah --> 
  <div id="body"> 
   <h1>Lorem ipsum dolor s</h1> 
   <p> <strong>Lorem ipsum dolor sit amet, consectet</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendreri<em>Lorem ipsum dolor sit amet, co</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volut<code>Lorem ipsum d</code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibul<a href="#">Lorem ipsum do</a>Lorem ipsum dolor sit amet, consectetur a</p> 
   <h2>Lorem ipsum do</h2> 
   <ol> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> 
    <li>Lorem ipsum dolor sit amet, consec</li> 
   </ol> 
   <blockquote> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vi</p> 
   </blockquote> 
   <h3>Lorem ipsum do</h3> 
   <ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> 
    <li>Lorem ipsum dolor sit amet, consec</li> 
   </ul> 
   <pre>
            <code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi</code>
         </pre> 
  </div>  
 </body>
</html>

Related Tutorials