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.

            
              <!-- Main Navigation -->
<nav id="nav" class="nav" role="navigation">
  <div class="nav__container">
    
    <!-- Title -->
    <h1 class="nav__title">
      <a href="#" class="nav__title-link">Flexy Nav</a>
    </h1>
    
    <!-- Nav List -->
    <ul class="nav__list" role="menubar">
      <li class="nav__item">
        <a href="#" class="nav__link">Home</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">Services</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">About</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">Contact</a>
      </li>
    </ul>
    
    <!-- Burger -->
    <a href="#" class="nav__burger"></a>

  </div> <!-- __container -->
</nav> <!-- .nav -->

<!-- Dummy Article -->
<article class="article">
  <header>
    <h1>Building a Mobile-First Flexbox Hamburger Navigation</h1>
    <small>By <a href="http://keenanstaffieri.com" target="_blank">Keenan Staffieri</a></small>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, odio.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eligendi tempora quibusdam sit magnam, ipsa et natus labore similique placeat alias, ab nobis maiores fuga in perferendis magni officia quia totam mollitia. Rerum, soluta voluptatibus error delectus iusto suscipit aperiam sint quos praesentium amet, neque assumenda hic ullam! Nam, libero.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, repellat. In exercitationem iste quod, perspiciatis tempora voluptatibus, ratione doloribus, corporis, porro nobis similique eaque magnam deserunt commodi? Quaerat, modi corrupti.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, exercitationem, vel? Nobis repellendus sit, nostrum quam maiores necessitatibus voluptatum asperiores ipsa nulla reprehenderit, porro repudiandae laborum voluptatem impedit vitae! Iusto provident est praesentium amet atque similique hic magni delectus dolorum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, vitae inventore nulla. Saepe error harum, iure deserunt, placeat veritatis numquam, rem veniam voluptatem sapiente ullam consectetur distinctio. Eius porro iste, sequi, rem nemo voluptate magnam beatae vel. Voluptates ex ad aspernatur fugiat natus dolorem asperiores saepe voluptate perspiciatis, libero quae aliquam tempore maxime rem dignissimos aliquid, molestiae officiis molestias ipsa ea. Accusantium, voluptatem, eveniet. Nobis modi, numquam nemo ducimus esse voluptates illum consectetur voluptas animi velit magni quaerat pariatur iure, atque ipsa beatae hic non ut quo iusto facere itaque.</p>
  <h2>Awesome Stuff</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatem maxime obcaecati enim ex a perspiciatis dolore rerum eveniet possimus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit placeat voluptatum ratione tempora natus quod voluptatibus laboriosam, quas dolores doloremque, minus numquam atque, quisquam praesentium aperiam veniam distinctio voluptates fugiat illo iste? Qui, iste veritatis exercitationem impedit eaque voluptatibus, modi adipisci magni amet voluptas ut unde est aperiam nesciunt error nemo esse quibusdam in nisi veniam molestias numquam culpa ullam!</p>
  <h2>In Conclusion...</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quos, beatae tempora sit nemo voluptates!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, officiis labore impedit, placeat totam, ab tenetur ipsam odio magni numquam reiciendis mollitia! Culpa nobis, magni in alias reiciendis nisi! Omnis ducimus quia et vel voluptatibus placeat obcaecati, laboriosam facilis nisi voluptate culpa perferendis commodi consectetur facere autem qui itaque asperiores accusamus tenetur aliquam neque totam! Ut dolorem nesciunt repellat, repudiandae accusamus, aut debitis ad consectetur reiciendis optio. Deserunt, aliquid commodi.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Yada yada yada.</p>
  <footer>
    <small>Posted in the year 2016.</small>
  </footer>
</article>

            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=PT+Serif';

// --- Colors ---
$off-white: #eee;
$black: #191919;
$blue: #2AA3BF;
$cream: #e1e0dc;

// --- Base Styles ---
body {
  font-family: 'PT Serif', serif;
  font-size: 20px;
  background-color: $cream;
  -webkit-font-smoothing: antialiased;
}

p {
  margin-bottom: 30px;
}

a {
  color: $blue;
  text-decoration: none;
}

// --- Dummy Article ---
.article {
  padding: 0 15px;
  margin: 100px auto;
  max-width: 800px;
}

// --- Main Navigation ---

// Namespace (treat as a component)
$ns: '.nav';

// Component styles
#{$ns} {
  
  $nav-height: 60px;
  
  // Nav
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: $nav-height;
  background-color: $black;
  
  // Nav Open Modifier state
  &--opened {
    
    @media screen and (max-width: 768px) {

      // Fade in navigation list
      #{$ns}__list {
        height: 100vh;
        opacity: 1;
        transition: opacity 300ms ease-out;
      }

      // Animate burger
      #{$ns}__burger {
        &:before {
          transform: translate3d(0, 6px, 0) rotate(-45deg);
        }

        &:after {
          transform: translate3d(0, -6px, 0) rotate(45deg);
        }
      } 
    }
  }
  
  // Nav Container
  &__container {
    padding: 0 15px;

    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: flex-end;
      margin: 0 auto;
      height: 100%;
      max-width: 800px;
    }
  }
  
  // Nav Title
  &__title {
    float: left;
    margin: 0;
    height: $nav-height;

    @media screen and (min-width: 769px) {
      flex: 1;
      align-self: flex-start;
      float: none;
      height: 100%;
    }
  }
  
  // Nav Title Link
  &__title-link {
    display: flex;
    align-items: center;
    padding-left: 0;
    height: 100%;
    color: $off-white;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;

    &:hover {
      color: $off-white;
    }
  }

  // Nav List
  &__list {
    position: absolute;
    left: 0;
    top: $nav-height;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    background-color: $black;
    list-style: none;
    opacity: 0;
    overflow: hidden;
    transition: opacity 300ms ease-out,
                height 0ms linear 300ms;
    
    @media screen and (min-width: 769px) {
      display: flex;
      position: static;
      width: auto;
      height: auto;
      background-color: transparent;
      opacity: 1;
    }
  }

  // Nav List Item
  &__item {    
    @media screen and (min-width: 769px) {
      display: flex;
      align-items: center;
      height: $nav-height;
    }
  }

  // Nav List Item Link
  &__link {
    display: block;
    padding: 15px 0;
    color: $off-white;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    
    @media screen and (min-width: 769px) {
      padding: 0 30px;
      transition: color 150ms ease-out;
      
      &:hover {
        color: $blue;
      }
    }
  }
  
  // Nav Burger
  &__burger {
    float: right;
    position: relative;
    width: $nav-height;
    height: $nav-height;

    &:before,
    &:after {
      content: '';
      position: absolute;
      left: 10px;
      width: 40px;
      height: 4px;
      background-color: $off-white;
      transform-origin: 50% 50%;
      transition: transform 275ms ease;
    }
    
    &:before {
      top: 22px;
    }
    
    &:after {
      top: 34px;
    }
    
    @media screen and (min-width: 769px) {
      display: none;
    }
  }
}

            
          
!
            
              /**
  Base Component class
 */
class Component {
  
  constructor (selector) {
    this.baseClass = 'component'
    this.$self = document.querySelector(selector)
  }
  
  getElement (eleName) {
    return this.$self.querySelector(`.${this.baseClass}__${eleName}`)
  }
  
  addModifier (modifierName) {
    this.$self.classList.add(`${this.baseClass}--${modifierName}`)
  }
  
  removeModifier (modifierName) {
    this.$self.classList.remove(`${this.baseClass}--${modifierName}`)
  }
}

/**
  FlexNav Component class
 */
class FlexNav extends Component {

  constructor (selector) {

    // Call parent constructor method
    super(selector)

    // Set some properties
    this.baseClass = 'nav'
    this.isOpen = false
    
    // Cache burger element selector
    this.$burger = this.getElement('burger')
    
    // Bind events
    this.$burger.addEventListener('click', (e) => { this.open(e) })
    this.$burger.addEventListener('touchend', (e) => { this.open(e) })
  }
  
  open (event) {
    event.preventDefault()

    this.isOpen = !this.isOpen
    
    if (this.isOpen) {
      this.addModifier('opened')
    } else {
      this.removeModifier('opened')
    }
  }
}

// Create FlexNav instance on document ready
document.addEventListener('DOMContentLoaded', function () {
  new FlexNav('#nav')
})

            
          
!
999px
Loading ..................

Console