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.

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

Console