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 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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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.

            
              
<div class="nav-container">
  <input type="checkbox" id="chkToggle">
  <ul class="nav-fixed">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio &ndash; just to test long navigation item titles</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <label class="toggle" for="chkToggle">
    <span class="open">☰</span>
    <span class="close">✕</span>
  </label>
</div>


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus
necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo
omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae
nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio
cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores
temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cu Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus
necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo
omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae
nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio
cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores
temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem.
Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima
dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cuLorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus
nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut
beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia
optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam
asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus,
voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem
minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cuLorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis,
mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque
in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores
temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem.
Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima
dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit
modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus
nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut
beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia
optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam
asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus,
voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem
minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus
necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo
omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae
nobis, mollitia optio cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio
cumque in aliquam asperiores temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit modi accusamus necessitatibus nemo omnis unde aut beatae nobis, mollitia optio cumque in aliquam asperiores
temporibus, voluptatem. Exercitationem minima dicta earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ratione vel nostrum perspiciatis, eos modi aperiam dolorum repellendus explicabo, velit cumque nulla quas rerum laborum quaerat obcaecati nihil accusamus eaque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. In a quaerat alias recusandae beatae deleniti, voluptatum eos, maiores, sapiente ea itaque. Cum error architecto expedita magnam voluptatem minus facere dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque necessitatibus voluptates distinctio temporibus, ut aspernatur nam provident amet sed suscipit ea iure asperiores culpa cum consequatur facere ratione! Maiores, sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam doloribus impedit vero non libero neque alias voluptatem sit est temporibus, repellat iste qui porro unde cupiditate soluta sint modi aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam debitis, similique eos minus dignissimos recusandae. Magni sequi iusto saepe, officiis, mollitia nemo vero voluptatem incidunt illo earum soluta dolore doloribus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae unde vitae, esse cum blanditiis aliquid explicabo, libero, architecto nostrum mollitia, nesciunt consequuntur. Voluptatibus odio suscipit quidem, eveniet ipsa animi minima! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum unde accusamus tempora vel eius fugiat delectus magnam. Quas fugiat, incidunt corporis cumque consequuntur, in quod quis doloremque ut nesciunt, aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam eveniet sed quam! Beatae nulla qui cupiditate molestiae incidunt perferendis hic. Cumque, alias beatae quia ratione, voluptatum molestiae veniam vero suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id laudantium, repudiandae magni! Repellendus quia nostrum et, quidem, error optio, quaerat adipisci delectus incidunt provident voluptatum mollitia temporibus. Eum, veniam obcaecati.
            
          
!
            
              @bg-color: rgba(0,0,0,.85);
@border-color: rgba(0,0,0,.9);
@text-color: #eee;
@text-hover-color: #fff;
@nav-open-default-width: 50vw;
.hover-bg {
   background-color: darken(@bg-color, 10%);
}
* {
  box-sizing: border-box;
}
.nav-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  max-height: 95vh;
  overflow-y: scroll; // make sure all items are available with scroll also in landscape
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  &::-webkit-scrollbar { 
    width: 0 !important 
  }
  background-color: @bg-color;
  outline: 3px solid @border-color;
  z-index: 1000000;
}
.nav-fixed {
  display: none;
  list-style-type: none;
  width: @nav-open-default-width;
  padding: 0;
  margin: 0;
  li {
    border-bottom: 1px solid @border-color;
    a {
      display: block;
      padding: 1rem;
      font-family: Arial, sans-serif;
      text-decoration: none;
      font-size: 1.5rem;
      color: @text-color;
    }
    &:hover {
      .hover-bg;
      a {
        color: @text-hover-color;
      }
    }
  }
}
.toggle {
  float: right;
  padding: .5rem;
  font-size: 1.5rem;
  text-align: right;
  line-height: 1;
  color: @text-color;
  &:hover {
    .hover-bg;
    cursor: pointer;
  }
  &:active {
    position: relative;
    top: 1px; // Click feedback
  }
}
.close {
    display: none;
}
#chkToggle {
  display: none;
  &:checked {
    ~ .nav-fixed {
      display: block;
    } 
    ~ .toggle {
      width: @nav-open-default-width;  
      opacity: 1;
      .open {
        display: none;
      }
      .close {
        display: inline;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .nav-fixed,
  #chkToggle:checked ~ .toggle {
    width: 90vw;
  }
}

@media screen and (min-width: 1300px) {
  .nav-fixed,
  #chkToggle:checked ~ .toggle {
    width: 30vw;
  }
}



            
          
!
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