Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                - navigation = { home, templates: { gallery: ['one', 'two'], post }, about, portfolio: { best_project, second, last: ['showcase'] }, contact }

header#header
  .brand.container
    a.logo(href='https://codepen.io/collection/XRoxGR', rel='home', target='_blank') Calibration template
    span.tagline Minimalism to the power of maximum
  nav#nav.nav.container
    ul.menu
      each value, key in navigation
        li.menu-item
          a(href='')=key
          if submenu = navigation[key] 
            ul.sub-menu
              each value, key in submenu
                li
                  a(href='') #{key}
                  if subsubmenu = submenu[key] 
                    ul.sub-menu
                      each value, key in subsubmenu
                        li
                          a(href='') #{value}
                          
div#wrapper
  main
              
            
!

CSS

              
                =header-desktop
  display: flex
  flex-flow: row wrap
  .brand
    flex: 1
    +ellipsis
  .nav
    position: static

[id=header]
  +relative(right left)
  z-index: 1000
  background: white
  box-shadow: $light-shadow
  transition: all $smooth-transition .2s
  user-select: none

  &:hover
    transition: all $smooth-transition

  .container
    max-width: none

  .brand
    padding:
      top: $hspace
      bottom: $hspace
    > * + *
      margin-left: $space

  .custom-logo
    vertical-align: middle
    margin: $half-nhspace 0
    max-height: calc(1rem + #{$_space})
    width: auto

  .logo
    font-weight: 600
    display: inline-block

  .tagline
    font-size: 12px
    display: none
    cursor: default
    @media (min-width: $mobile)
      display: inline


  body:not([class*=menu]) &
    @media (max-width: $mobile)
      position: static!important
      transform: none!important
      + *
        margin-top: 0!important


  .menu-toggle
    +absolute(top right)
    body:not([class*=menu]) &
      @media (min-width: $mobile)
        display: none
    .menu-desktop &
      display: none

  nav
    padding:
      top: $hspace
      bottom: $hspace

    @media(max-width: $mobile - 1px)
      .menu-desktop &
        +absolute(bottom right)
    @media(min-width: $mobile)
      body:not(.menu-mobile) &
  
    &[style*=hidden] + .menu-toggle
      visibility: hidden

  // flexy header

  body:not([class*=menu]) &
    @media (min-width: $mobile)
      +header-desktop
  .menu-desktop &
    +header-desktop

  .has-header-image &
    padding: 0
    background: none

    .brand
      +fixed(top)
      padding:
        top: $hspace
        bottom: $hspace

    .nav
      +absolute(right bottom)
      .menu-mobile &
        position: static
        padding: 0

    .wp-custom-header
      z-index: -10
      width: 100%
      background-color: white
      box-shadow: $light-shadow

      img
        display: block
        width: 100%

  &.headroom
    // transition: none

  &.headroom--top
    

  &.headroom--not-top
    
    +fixed
    .brand
      +relative

    .wp-custom-header
      +absolute(bottom)

  &.headroom--unpinned
    transform: translateY(-100%)

html.nav-open
  &, body 
    overflow: hidden!important
    height: 100%!important

// html.nav-open
//   overflow-y: scroll!important

.sub-menu-toggle
  +absolute(top right)
  +hide-text
  line-height: inherit
  cursor: pointer
  color: inherit
  appearance: none
  border: 0
  background: none
  outline: none

  &:after
    content: ''
    +absolute(top 50% left 50%)
    width: 4px
    height: 4px
    border:
      bottom: 2px solid
      right: 2px solid

    transform-origin: 50% 50%
    transform: translate(-50%,-50%) rotate(45deg) scale(1)
    opacity: .5

  &:hover:after, .no-touchevents &
    opacity: 1

  .open ~ &
    &:after
      transform: translate(-50%,-50%) rotate(45deg) scale(-1)


=link-current
  > a:before
    content: ''
    +absolute(bottom 100% left 50%)
    transform: translate3d(-50%,#{$nhspace},0)
    width: .5rem
    border-bottom: 2px solid
    transition: all $smooth-transition, opacity $smooth-transition
    opacity: 0
    backface-visibility: hidden
    will-change: transition

  &[class*=current], &:hover, &:active, &:focus
    > a:before
      transform: translate3d(-50%,-1em,0)
      opacity: .5
  &:hover > a:before
    opacity: 1


=sub-menu-dropdown
  > .sub-menu, > .children
    +absolute(top 100%)

    margin: $hspace -1em 0
    min-width: calc(100% + 2em)
    background-color: white
    white-space: nowrap    
    box-shadow: 0 1px 1px 0px rgba(0,0,0,.125)

    opacity: 0
    transform: translateY(-1rem)
    visibility: hidden
    z-index: -1
    transition: all $smooth-transition, visibility 0s linear .3s, z-index 0s linear .01s
    
    &:before
      content: ''
      +absolute(top $nhspace bottom $nhspace left $nspace right $nspace)
      z-index: -1

          
  &:active, &:focus, &:hover
    > .sub-menu, > .children
      opacity: 1
      transform: translateY(0%)
      visibility: visible
      z-index: 1
      transition-delay: 0s, 0s, .3s

=header-mobile
  .custom-logo
    filter: invert(1)
  &:before, &:after
    content: ''
    background: black
    +absolute(top right left bottom)
    transition: inherit
    z-index: -1
  &:before
    bottom: 100%
  &:after
    top: 100%


=menu-mobile-open
  position: static
  opacity: 1
  visibility: visible
  ul
    display: block!important

=menu-mobile
  +fixed(top calc(#{$_double-hspace} + 1rem) right left bottom)
  padding: 0
  font-size: 1rem
  font-weight: 500
  color: white
  

  transition: opacity $smooth-transition
  will-change: opacity
  background-color: black
  opacity: 0
  visibility: hidden
  overflow-y: scroll
  -webkit-overflow-scrolling: touch


  .nav-open &
    transition: all $smooth-transition .2s
    opacity: 1
    visibility: visible


  .menu
    display: none
    overflow: hidden
    
    min-width: 18rem
    max-width: 75vw
    margin:
      left: auto
      right: auto

    // opacity: 0
    // transition: opacity $lazy-transition
    &.open
      display: block

    > li
      padding: .75rem 0
      overflow: hidden
      +relative
      +  li
        border-top: 1px solid rgba(white,.5)
      > a
        letter-spacing: .05em
        text-transform: uppercase

      > button
        padding: 1.5em

  a, button
    padding: .75em 0
    display: block
    min-height: 1rem

  ul
    display: none
    overflow: hidden
    font-size: 14px

  .menu > li > ul
    > li
      display: inline-block
      min-width: calc(50% - 1.2em)
      box-sizing: border-box
      vertical-align: top
      border-left: 1px solid rgba(white,.5)

    li
      margin: .5em 0 .5em 1em
      li
        text-align: right
        border-right: 1px solid rgba(white,.5)

    a, button
      padding: .25em 1.5em

    [class*=children]
      padding-right: 1.5em
      +relative

      
=menu-desktop
  
  .menu
    display: block!important
  .sub-menu, .children
    display: block
    
  .menu > li
    +relative
    display: inline-block

    + li
      margin-left: 1em

    > .sub-menu, > .children
      display: block!important

    &[class*=children]

      &:before
        content: ''
        +absolute(top 100% left 1em right 1em)
        height: $hspace
        z-index: 3
        cursor: pointer

      &:after
        content: ''
        +absolute(top calc(100% + #{$_half-space}) left 50%)
        margin-top: -6px
        margin-left: -4px
        width: 4px
        height: 4px
        border:
          bottom: 2px solid
          right: 2px solid
        transform: rotate(45deg)
        opacity: .5
      &:hover:after
        opacity: 1

    > a
      text-transform: uppercase
      display: block
      padding: 0 1em

    > .sub-menu-toggle
      display: none

    li[class*=children]
      > a
        padding-right: 3.25em
      
    +sub-menu-dropdown

    +link-current

  [class*=current] > a
    font-weight: bold


  li li
    margin: 0
    +relative

  .sub-menu, .children
    display: block
    color: black
    text-shadow: none
    li
      max-width: 24em
    a, .sub-menu-toggle
      display: block
      padding: 1em 2em
      +ellipsis
    
    [class*=current] > a, a:hover
      background-color: rgba(black,.05)
      
    .sub-menu, .children
      display: none
      &.open
        display: block

      a
        text-align: right
        padding-right: 3.25em
        // padding: .5rem 2rem .5rem 3rem




[id=nav]
  +relative
  font-weight: 600
  font-size: 12px
  user-select: none

  ul
    +clear-list

  body:not([class*=menu]) &
    @media (max-width: $mobile - 1px)
      +menu-mobile
      +menu-mobile-open
    @media (min-width: $mobile)
      +menu-desktop
  .menu-mobile &
    +menu-mobile
  .menu-desktop &
    +menu-desktop


[id=header]
  body:not([class*=menu]) &
    @media (max-width: $mobile - 1px)
      +header-mobile
  .menu-mobile &
    +header-mobile

  .nav-open &
    color: white
    &:before
      bottom: 50%!important
    &:after
      top: 50%!important
    
.menu-toggle
  
  position: relative
  z-index: 1000
  overflow: hidden
  backface-visibility: hidden
  text-align: center
  font-weight: 600
  color: inherit
  will-change: color
  cursor: pointer
  text-shadow: inherit
  line-height: inherit
  padding: $hspace $space
  // transition: color .2s .2s
  
  appearance: none
  border: 0
  background: none
  outline: none


  &:before, &:after
    content: ''
    position: absolute
    transition: $smooth-transition .2s
    box-sizing: border-box
    width: .5rem
    height: .5rem
    left: 50%
    
    border-style: solid
    opacity: 0
    will-change: opacity, top, bottom
    backface-visibility: hidden
    color: white!important
    z-index: -1
    
  &:before
    // transform-origin: 0 0
    transform: rotate(-45deg)
    border-width: 0 0 2px 2px
    bottom: 100%

  &:after
    // transform-origin: 0 50%
    transform: rotate(-45deg) 
    border-width: 2px 2px 0 0
    top: 100%


  .nav-open &
    color: rgba(black,0)
    transition: all .2s
    &:before
      bottom: 50%
      opacity: 1
    &:after
      top: 50%
      opacity: 1

// Overwrite template    
body
  background: linear-gradient(to top, #4ac29a, #bdfff3)
  
svg
  path
    fill: black
    
[id=footer]
  
  .container
    padding: 1.5rem 0
  .footer-title
    display: none
              
            
!

JS

              
                # slideToggler: https://codepen.io/mican/pen/wrNjVW 

class responsiveMenu

  constructor: ( nav, @opt ) ->

    @opt.breaking or= '640px'
    @opt.maxBreaking = parseInt(@opt.maxBreaking) or 1040

    menu = nav.querySelector('.menu')

    unless slideToggler
      class slideToggler
        constructor: (@el) ->
          return unless @el
        toggle: =>
          @el.classList.toggle 'open'
          @el.style.cssText = "display: #{if @el.classList.contains('open') then 'block' else 'none'}"
          
    sub.toggler = new slideToggler sub for sub in menu.querySelectorAll('ul')

    menuToggle = @createToggle nav, 'menu-toggle', 'Menu'
    menuToggle.addEventListener 'click', ->
      document.documentElement.classList.toggle 'nav-open'
      menuToggle.menu.classList.toggle 'open', document.documentElement.classList.contains 'nav-open'
      
    for subMenu in menu.querySelectorAll('ul')
      subMenu.parentNode.classList.add 'has-children'
      subMenuToggle = @createToggle subMenu, 'sub-menu-toggle', '+'
      subMenuToggle.addEventListener 'click', ->
        @menu.toggler.toggle()
        for open in @parentNode.parentNode.querySelectorAll('ul.open')
          open.toggler.toggle() unless open is @menu
        
    for sub in menu.querySelectorAll('.has-children[class*=current] > ul')
      sub.classList.add 'open'
    
    document.addEventListener 'DOMContentLoaded', @breaking
    window.addEventListener 'resize', @breaking
    setTimeout @breaking, 3000
    

  createToggle: (menu, klass, label) =>

    toggle = menu.parentNode.querySelector(".#{klass}") or document.createElement("button")
    toggle.classList.add klass
    toggle.appendChild document.createTextNode(label)
    toggle.menu = if menu.nodeName is 'UL' then menu else menu.querySelector('.menu')
    menu.parentNode.insertBefore toggle, menu.nextSibling

  breaking: =>

    document.body.classList.remove 'menu-mobile' 
    document.body.classList.add 'menu-desktop'

    div = document.createElement('div')
    div.style.cssText = "position: absolute; width: #{@opt.breaking}"
    document.body.appendChild div
    @menuBreak = div.clientWidth or 0
    document.body.removeChild div
    
    @menuBreak += @getWidth(el) for el in document.querySelectorAll("#{@opt.breaking}")
    isMobile = (windowWidth = document.body.clientWidth) <= Math.min(@menuBreak, @opt.maxBreaking)

    document.body.classList.toggle 'menu-mobile', isMobile
    document.body.classList.toggle 'menu-desktop', !isMobile
    document.documentElement.classList.remove 'nav-open' unless isMobile


  getWidth: (el) ->

    return el.clientWidth if el.clientWidth > 0
    clone = el.cloneNode(true)
    clone.style.cssText = 'position: absolute; visibility: hidden; display: block;'
    el.parentNode.appendChild clone
    width = clone.clientWidth
    el.parentNode.removeChild(clone)
    return width


new responsiveMenu document.querySelector('#nav'), {breaking: '.logo, .tagline, .menu'}
              
            
!
999px

Console