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.

            
              <html>

<head>
    <meta name="viewport" content="user-scalable=no initial-scale=1">
      
    <meta charset="UTF-8">
    
    <meta name="keywords" content="some, keywords, here" />
    
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    
	<title>Mobile Nav</title>
    
    <link href='https://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
    
    <link href='https://fonts.googleapis.com/css?family=Cabin:400,500,600,700' rel='stylesheet' type='text/css'>
        
</head>

<body>
  <div class="main">
    <div class="content">
    <h1>Neque porro quisquam est qui dolorem ipsum quia</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus elit sit amet urna adipiscing pulvinar ac id quam. Suspendisse vel hendrerit turpis, a imperdiet lectus. Quisque placerat velit dolor. Sed risus lacus, tempor ut lorem quis, venenatis vulputate lectus. Proin vel metus consectetur, pulvinar libero at, porta felis. Ut facilisis euismod dictum. In quis elit vitae dui dictum adipiscing. Fusce nisi ligula, ultricies sit amet rutrum non, elementum semper nunc. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae quam ut tellus blandit interdum. Sed a diam vestibulum, vehicula odio ut, vulputate massa. Phasellus sit amet aliquam nulla.

    Aliquam sapien magna, iaculis ac diam nec, bibendum iaculis ante. Pellentesque facilisis vulputate placerat. Nullam nisl velit, rhoncus blandit elementum a, pellentesque rhoncus nisl. Duis ligula erat, consequat nec velit ac, congue euismod orci. Suspendisse eu lacus non odio feugiat interdum eu at ipsum. Etiam fermentum a est posuere fermentum. Sed et purus a enim bibendum tempor. Praesent egestas auctor gravida. Nunc vulputate dolor nec tortor facilisis viverra. Maecenas dui libero, elementum vel varius sodales, varius vel nisl. Praesent mollis vitae turpis sit amet placerat. Donec ornare sem eleifend ante imperdiet venenatis. Proin consequat laoreet metus ut vestibulum.

    Pellentesque nec diam euismod lectus gravida pulvinar. Nullam semper ultricies tincidunt. In vel hendrerit nisl, mattis sodales nibh. Vivamus et ante a nulla auctor euismod eget pellentesque tortor. Etiam blandit elit nec odio imperdiet, sit amet pharetra arcu consectetur. Pellentesque metus turpis, rhoncus eget mollis eget, auctor sit amet nisl. Ut accumsan elementum nisi at semper. Cras porttitor dolor eget sem fermentum egestas. Cras tristique ipsum non orci feugiat, eget pretium purus venenatis. Morbi eros massa, varius ut laoreet eu, scelerisque vel libero. Maecenas porttitor laoreet lacinia. Suspendisse imperdiet sodales mi, at tincidunt tortor commodo sed. Nullam purus nibh, dictum non tellus sit amet, sodales iaculis nibh. Cras fringilla convallis magna. Etiam iaculis libero eget malesuada sodales.

    Pellentesque placerat tortor est, a congue mauris vulputate ut. Nulla non lobortis justo. Nullam nec nunc et risus feugiat pellentesque et sed lectus. Pellentesque quis libero purus. Etiam vitae interdum ante. Sed adipiscing tincidunt massa id pharetra. Mauris consequat quis est nec tristique. Proin ullamcorper vestibulum velit in posuere. Maecenas vestibulum nisi diam, a sollicitudin turpis tincidunt eget. Donec blandit purus ut porta aliquam. Aliquam dui augue, ultricies eu sollicitudin vel, condimentum sit amet nibh. Sed at dictum dui. Nunc condimentum lorem nec rhoncus pharetra. Donec consectetur dui sit amet pulvinar blandit.

    In porttitor felis dolor, nec sollicitudin enim fringilla at. Cras gravida nec nibh vitae interdum. Aliquam porta lacus massa, eu congue elit malesuada vel. Praesent scelerisque nunc et velit eleifend hendrerit. Nunc massa magna, faucibus quis sodales ac, aliquet at felis. In eget nisi in odio sagittis convallis nec non lectus. Sed dolor purus, mollis eget placerat ac, consequat eget sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus metus sem, volutpat in massa nec, tempor blandit nunc. Fusce rhoncus est ut mollis ornare. Proin diam ipsum, viverra viverra accumsan sit amet, porttitor ac dolor. Pellentesque non elit tempus, elementum dui et, fringilla quam.</p>
    </div>


    <div class="nav-container">
        <div class="control">• • • • •</div>
        <div class="links-container">
        <div class="links">
            <ul>
                <li class="padded"><a href="#0">Home</a></li>
                <li class="padded"><a href="#0">News</a></li>
                <li class="padded"><a href="#0">Contact</a></li>
                <li class="padded"><a href="#0">About</a></li>
                <li class="padded"><a href="#0">Portfolio</a></li>
                <li class="padded"><a href="#0">Services</a></li>
                <li class="padded"><a href="#0">Home</a></li>
                <li class="padded"><a href="#0">News</a></li>
                <li class="padded"><a href="#0">Contact</a></li>
                <li class="padded"><a href="#0">About</a></li>
            </ul>
            <div class="clearfix"></div>
            </div>
            </div>
    </div>
    
  </div>
    
</body>
      
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      
<!-- <script>
$( ".control" ).click(function() {
  $( ".links-container" ).slideToggle( 800 );
});
</script> -->
    
    <script>
     $('.links-container').each(function() {
 $(this).hide();
});

$('.control').click(function () {
  $( ".links-container" ).slideToggle( 300 );
});
    </script>
    
</html>
            
          
!
            
              div.main {
    background-color: #888;
    padding: 60px 60px 95px;
    color: #fff;
    font-family: 'Cabin', sans-serif;
}

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

h1 {
    text-transform: uppercase;
}

.content {
    max-width: 600px;
    margin: 0px auto;
}

.nav-container {
    background-color: #066;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    max-height: 90%;
    height: auto;
    font-weight: 400;
    font-size: 1.3em;
    letter-spacing: 1px;
}

div.control {
    background-color: #0ff;
    cursor: pointer;
    color: #066;
    float: none;
    padding: 10px;
    display: inline-block;
    text-align: center;
    width: 100%;
}

div.links {
    position: relative;
    margin: 20px;
}

div.links-container {
    clear: both;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1170px)
{li.padded {width: 20%;}}

@media (min-width: 970px) and (max-width: 1170px)
{li.padded {width: 25%;}}

@media (min-width: 500px) and (max-width: 970px)
{li.padded {width: 33.33%;}}

@media (min-width: 350px) and (max-width: 500px)
{li.padded {width: 50%;}}

@media (max-width: 350px)
{li.padded {width: 100%;}}

li.padded {
    display: block;
    padding: 5px;
    float: left;
}

.nav-container ul li a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    
    display: block;
    border: 2px solid #fff;
    position: relative;
    padding: 20px 0px;
    
    border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
 }

.nav-container ul li a:hover {
    background-color: #fff;
    color: #066;
    font-weight: 700;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    width: 100%;
    position: relative;
}
            
          
!
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.

Console