css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <div class="header">
    <h1>My big company!</h1>
  </div>
  <ul class="menu">
    <li><a href="#">Home</a></li><li>
    <a href="#">Services</a></li><li>
    <a href="#">Portfolio</a></li><li>
    <a href="#">About</a></li>
  </ul>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>

    <p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>

    <p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>

    <p>Suspendisse suscipit in lectus at aliquet. Integer non sem enim. Vestibulum aliquam imperdiet laoreet. In malesuada sodales augue, ut aliquam elit tempus id. Suspendisse sed hendrerit nibh. Curabitur molestie in libero nec vulputate. Cras ut scelerisque lacus, vitae cursus dui. Fusce ultricies lectus tincidunt, congue elit interdum, pellentesque nunc.</p>
    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>

    <p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>
            
          
!
            
              body {
   margin: 0; 
}

.header {
    height: 100px;
    background-color: #ddcbaf;
    text-align: center;
}

.header h1 {
    margin-top: 0;
    padding-top: 20px;
}

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #BFFFF3;
}

.menu li {
    display: inline-block;
    text-align: center;
    width: 25%;
}

.menu li:hover,
.menu li:focus {
    background-color: #66FFE3;
}

.menu a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
}

.container {
  padding: 0 20px;
  color: #989898;
}
            
          
!
            
              // Demo by Aurelio De Rosa (@AurelioDeRosa)
// See article: http://www.sitepoint.com/css-position-sticky-introduction-polyfills/

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console