cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<div>
  <h1>Fixed position navigation example</h1>
  
  <p>Scroll me to see the navigation stick!</p>

  <p>Cupcake ipsum dolor sit amet danish. Muffin halvah carrot cake toffee pudding bonbon. Dragée caramels dessert gummies. Macaroon brownie sweet cotton candy tart jujubes. Cotton candy dragée tart jelly. Jelly beans cake bonbon. Pastry fruitcake apple pie sugar plum chocolate chocolate bar apple pie gummi bears donut. Ice cream jelly beans croissant jelly-o pie. Sweet roll gummies pastry wafer candy muffin muffin icing. Gingerbread liquorice liquorice. Icing soufflé candy canes chocolate cake. Cookie carrot cake dragée. Oat cake croissant ice cream pudding.</p>

  <p>Marshmallow marshmallow tootsie roll macaroon. Fruitcake candy gummi bears ice cream caramels gummi bears. Pudding halvah gingerbread candy canes sesame snaps. Danish sesame snaps candy canes sesame snaps tiramisu cookie pudding. Jelly-o cupcake powder dessert pastry jelly-o pudding. Cookie chupa chups soufflé wafer fruitcake ice cream apple pie gummi bears. Cookie chocolate bar chupa chups tart. Gingerbread chupa chups toffee biscuit. Chocolate bar cotton candy soufflé dragée muffin. Gummi bears toffee candy canes cake gingerbread halvah carrot cake cake icing. Toffee ice cream sugar plum tootsie roll chupa chups caramels cookie sesame snaps chocolate cake. Sweet pastry croissant candy canes powder candy liquorice lollipop. Chocolate bar biscuit marzipan pastry muffin bear claw cake brownie.
  Bear claw sugar plum icing carrot cake powder tart chupa chups lollipop gingerbread. Danish sesame snaps gummi bears carrot cake chocolate oat cake cookie tiramisu. Sweet bear claw gingerbread ice cream tart soufflé jelly candy canes jelly-o. Sesame snaps oat cake jujubes macaroon fruitcake chocolate wafer. Pie cotton candy pastry. Macaroon oat cake pie marzipan candy canes chocolate cake dessert marshmallow. Chupa chups macaroon cotton candy tiramisu. Apple pie cookie gummies apple pie toffee jelly-o marshmallow powder oat cake. Biscuit candy canes cookie halvah sweet roll sweet roll gummi bears apple pie chocolate. Macaroon macaroon jelly cookie donut jelly halvah fruitcake. Bear claw tart donut muffin biscuit chocolate bar. Sweet sweet candy brownie danish jujubes croissant. Soufflé chocolate danish tiramisu donut.</p>

  <p>Carrot cake pastry bonbon jujubes brownie. Wafer halvah candy canes powder fruitcake brownie ice cream toffee soufflé. Brownie muffin oat cake pastry candy canes cupcake macaroon pie candy canes. Biscuit jelly lemon drops jelly-o. Oat cake liquorice biscuit halvah muffin. Jelly oat cake chocolate jelly-o. Jelly beans macaroon chocolate cake marzipan. Pastry caramels carrot cake gingerbread candy. Soufflé lemon drops apple pie. Jelly-o dessert marshmallow pie jelly marzipan gingerbread halvah topping. Gingerbread marzipan cake tootsie roll sweet. Gummi bears cake cupcake. Pie macaroon donut. Liquorice dessert chupa chups cheesecake chocolate halvah cotton candy tiramisu jelly.</p>

  <p>Pie macaroon marshmallow lemon drops. Macaroon gummies carrot cake dessert tart sugar plum chocolate bar. Chocolate bar bear claw lollipop pie cake. Liquorice pastry powder marzipan topping chocolate candy canes. Tart pie jelly cake dessert caramels. Candy chupa chups cookie fruitcake wafer tiramisu. Cupcake soufflé jelly beans. Lemon drops dragée cupcake marzipan pie. Dragée jelly beans topping jelly-o gummies pie. Ice cream marzipan icing. Donut muffin lollipop gummies sesame snaps wafer marzipan pastry. Apple pie muffin dessert halvah. Jujubes halvah cheesecake sesame snaps jelly beans biscuit liquorice donut.</p>
</div>
            
          
!
            
              /* make the navigation bar stick to the top of the container */

ul {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}

/* make the list items inline-block */

ul li {
  list-style: none;
  display: inline-block; /* block by default */
  margin-left: -4px; /* cinch up the space made between inline-block elements */
}

/* make the links block elements */
a {
  background: #000;
  color: #fff;
  text-decoration: none;
  display: block; /* inline-block by default */
  padding: 10px;
  margin-right: 2px;
}

a:hover, a:focus { /* hover and focus states */
  background: #f00;
}

/* styles to position the rest of the main content */

div {
  margin-top: 60px;
  width: 400px;
}
            
          
!
999px
Loading ..................

Console