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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <nav>

<div class = "hamburger-menu">
  <input id="nav" type="checkbox" />
  <div id = "menu">  
  <div class = "menu-item topbun">
 <svg viewBox="0 0 200 110">
 <defs>
  <linearGradient id="svg_4">
   <stop offset="0" stop-color="#ff7f00"/>
   <stop offset="1" stop-color="#f9c55d"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse stroke="#000000" id="svg_2" cy="113" cx="-239" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#ff7f00"/>
  <polygon id="svg_9" fill="#FF0000"/>
  <polygon id="svg_10" fill="#FF0000" points="194,58 194,58 194,58 194,58 194,58 194,58 " stroke-width="5"/>
  <path stroke="#000000" stroke-opacity="0" id="svg_1" d="m3.99999,78c0,-19 10.1416,-64 92.11948,-73c81.97787,-9 98.88053,44 98.88053,61c0,17 -38.03097,34 -93.80974,41c-55.77876,7 -97.19027,-10 -97.19027,-29z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="url(#svg_4)"/>
 </g>
</svg>

    </div>
  <a href = "http://www.gabrielajohnson.com/portfolio.html" target="_blank" class = "menu-item tomato">
   
   <svg viewBox = "0 0 180 100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="none">
 <g>
  <title>Layer 1</title>
  <path fill="#e0524e" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m8.75,37.10938l164.00001,-1l0,21c0,0 -40.49383,16 -83.01235,18c-42.51852,2 -80.98766,-18 -80.98766,-18c0,0 0,-20 0,-20z" id="svg_16" stroke-opacity="0" stroke="#000000"/>
  <ellipse fill="#fb5750" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="90.75" cy="35.10938" id="svg_5" rx="82" ry="31" stroke="#000000"/>
  <ellipse fill="#ff7f00" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="-239" cy="113" id="svg_2" stroke="#000000"/>
  <polygon fill="#FF0000" id="svg_9"/>
  <ellipse fill="#e0524e" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" cx="91.75" cy="34.10938" id="svg_21" rx="72" ry="22" stroke="#000000"/>
  <path fill="#fb5750" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m24.75,24.83664c0,0 56.66667,8.79546 56.66667,8.79546c0,0 -18.54545,22.47727 -18.54545,22.47727c0,0 45.33333,0 45.33333,0c0,0 -14.42425,-22.47727 -14.42425,-22.47727c0,0 66.9697,-10.75 66.9697,-10.75c0,0 -28.84848,-9.77273 -28.84848,-9.77273c7,3 -42.24243,12.70455 -42.24243,12.70455c0,0 -50.48484,-9.77273 -50.48484,-9.77273c0,0 -14.42425,8.79545 -14.42425,8.79545z" id="svg_24" stroke="#000000"/>
  <path fill="#ff7c79" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m78.25,33.85938l-34,-4c-1.41667,4.66667 4.66667,12.33333 16,14l18,-10z" id="svg_25"/>
  <path fill="#ff7c79" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m134.05435,26.1448c-11.33334,-1.33334 -10.30431,0.36186 -21.63764,-0.97147c-6.95656,2.76349 -22.69768,19.27991 -11.36435,20.94658l33.00199,-19.97511z" id="svg_26" transform="rotate(-148.76522827148438 115.56140899658205,35.646617889404304) "/>
  <path fill="#ff7c79" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m89.71347,25.85936l-18.21347,-9.74999c0,0 10.98166,-1.50001 18.21347,-1.50001c7.23181,0 16.07069,2.25 15.53498,1.50001c-0.53571,-0.74999 -15.53498,9.74999 -15.53498,9.74999z" id="svg_29" stroke="#000000"/>
 </g>
</svg>
    <p>HOME</p></a>
    <a href = "http://www.twitter.com/gabbyjohnsonweb" target="_blank" class = "menu-item lettuce">
      <svg viewBox="0 0 180 100">
<g>
  <title>Layer 2</title>
  <g id="svg_3" stroke="null">
   <title>Layer 2</title>
   <g id="svg_1" stroke="null">
    <path fill="#63bb43" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m93.44439,72.75985c0,-3.79387 -6.00717,-6.82898 -18.0215,2.27633c-12.01433,9.10529 -8.58166,-4.55265 -9.15379,-5.31141c-0.57213,-0.75877 -11.4422,-0.75878 -12.30036,-0.75878c-0.85817,0 -6.86533,-8.34652 -7.43746,-9.10528c-0.57213,-0.75877 -17.44938,3.79386 -18.0215,3.0351c-0.57213,-0.75877 -2.86054,-8.34653 -3.43267,-9.10529c-0.57213,-0.75877 -14.09031,7.76169 -12.88283,0.52073c-0.02456,-7.37601 5.73146,-3.55584 4.01514,-8.10849c-1.71633,-4.55265 -9.07711,-0.60171 -6.72314,-7.89331c-0.57213,-0.75876 5.00681,0.30556 7.58132,-2.72954l0.28603,-15.93426c7.82112,-2.58189 4.0048,6.07019 9.15379,3.79386c5.149,-2.27633 -2.58386,-6.43901 0.95825,-7.80633c6.75054,-1.19853 3.33257,5.53001 7.62341,2.49491c4.29083,-3.0351 1.28952,-5.37551 6.4669,-9.24033c-0.57213,-0.75876 8.9801,6.20524 8.9801,6.20524c0,0 5.149,-2.27633 7.72349,-6.82898c2.5745,-4.55265 2.5745,0.75877 10.298,1.51755c7.72351,0.75877 18.0215,-4.55265 17.44936,-5.31141" id="svg_34" stroke="#000000"/>
    <path fill="#63bb43" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m79.89838,5.85704c7.11844,0.13504 6.16533,7.41282 20.73086,0.54279c14.56554,-6.87005 9.05247,5.49954 9.60035,6.29469c0.54787,0.79514 12.71918,2.33342 13.68009,2.45487c0.96089,0.12144 6.66693,8.82759 7.2148,9.62274c0.54787,0.79514 20.00195,-1.1016 20.54982,-0.30646c0.54787,0.79514 2.18274,8.26086 2.73061,9.056c0.54787,0.79515 17.98741,-0.63029 18.53527,0.16485c0.54787,0.79515 -10.89882,3.70393 -9.53351,8.23193c1.3653,4.528 11.84241,6.57805 12.39028,7.3732c0.54786,0.79514 -11.39597,0.01153 -14.64967,2.50395c-3.25368,2.49242 -2.81586,14.16229 -2.26799,14.95743c0.54787,0.79514 -3.74222,-6.28022 -9.78585,-4.86631c-6.04362,1.4139 -1.02023,7.85605 -1.02023,7.85605c0,0 -4.06249,-6.32071 -9.23797,-4.07117c-5.17547,2.24953 -9.6683,6.76307 -9.12043,7.55822c0.54787,0.79514 -8.5467,-6.88744 -8.5467,-6.88744c0,0 -6.04363,1.4139 -9.48281,5.33469c-3.43917,3.92079 -2.78994,-1.07852 -11.34525,-2.88567c-8.55531,-1.80718 -20.73532,1.73482 -20.18745,2.52996" id="svg_35" stroke="#000000"/>
    <path fill="#89e668" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m78.90492,3.21732c7.11844,0.13504 6.16533,7.41282 20.73086,0.54278c14.56554,-6.87004 9.05247,5.49955 9.60034,6.2947c0.54787,0.79514 12.71918,2.33342 13.68009,2.45487c0.96089,0.12144 6.66693,8.82759 7.2148,9.62274c0.54787,0.79514 20.00195,-1.1016 20.54982,-0.30646c0.54787,0.79514 2.18274,8.26086 2.73061,9.056c0.54787,0.79515 17.9874,-0.63029 18.53527,0.16485c0.54787,0.79515 -10.89882,3.70393 -9.53351,8.23193c1.3653,4.528 11.84241,6.57805 12.39028,7.3732c0.54786,0.79514 -11.39597,0.01153 -14.64967,2.50395c-3.25368,2.49242 -2.81586,14.16229 -2.26799,14.95743c0.54787,0.79514 -3.74222,-6.28022 -9.78585,-4.86631c-6.04362,1.4139 -1.02023,7.85605 -1.02023,7.85605c0,0 -4.06249,-6.32071 -9.23797,-4.07117c-5.17548,2.24953 -9.6683,6.76307 -9.12043,7.55822c0.54787,0.79514 -8.5467,-6.88744 -8.5467,-6.88744c0,0 -6.04363,1.4139 -9.48281,5.33469c-3.43917,3.92079 -2.78994,-1.07852 -11.34525,-2.88567c-8.55531,-1.80718 -20.73532,1.73482 -20.18745,2.52996" id="svg_33" stroke="#000000"/>
    <path fill="#89e668" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" stroke-opacity="0" d="m93.1711,69.40965c0,-3.79387 -6.00716,-6.82898 -18.02149,2.27633c-12.01433,9.10529 -8.58166,-4.55265 -9.15379,-5.31142c-0.57213,-0.75877 -11.4422,-0.75877 -12.30037,-0.75877c-0.85816,0 -6.86532,-8.34652 -7.43746,-9.10529c-0.57213,-0.75877 -17.44936,3.79387 -18.02149,3.0351c-0.57213,-0.75877 -2.86054,-8.34652 -3.43267,-9.10529c-0.57213,-0.75877 -14.09032,7.76169 -12.88284,0.52073c-0.02455,-7.37601 5.73147,-3.55583 4.01514,-8.10848c-1.71633,-4.55265 -9.07711,-0.60171 -6.72314,-7.89331c-0.57213,-0.75877 5.00681,0.30556 7.5813,-2.72954l0.28604,-15.93427c7.82112,-2.58189 4.0048,6.07019 9.15379,3.79387c5.149,-2.27633 -2.58386,-6.43901 0.95824,-7.80635c6.75054,-1.19853 3.33258,5.53002 7.62342,2.49493c4.29083,-3.0351 1.28952,-5.37552 6.4669,-9.24033c-0.57213,-0.75877 8.9801,6.20524 8.9801,6.20524c0,0 5.14899,-2.27633 7.72349,-6.82898c2.5745,-4.55265 2.5745,0.75877 10.298,1.51756c7.72349,0.75877 18.02149,-4.55266 17.44936,-5.31142" id="svg_30" stroke="#000000"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" id="svg_37" d="m46.32905,58.00811c0.00243,-0.62278 0.09939,-1.16228 0.43283,-1.60811c0.40753,-0.54491 1.06377,-0.89832 1.45765,-1.13611c0.73579,-0.4442 1.22682,-0.74278 1.67442,-1.20563c0.42454,-0.43901 0.67905,-0.90908 1.10872,-1.35565c0.45072,-0.46845 0.83524,-0.92959 1.20523,-1.37211c0.47601,-0.56933 0.91125,-0.89771 1.3453,-1.46846c0.29599,-0.38922 0.69326,-0.9781 0.97225,-1.35565c0.43888,-0.59395 0.77779,-1.11607 1.03995,-1.66781c0.22805,-0.47994 0.48612,-1.02703 0.87214,-1.54416l0.30752,-0.51103l0.38675,-0.30187l0,-0.59633" opacity="0.26" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m131.71975,52.58808c0.62982,0.04279 1.16927,0.17324 1.59862,0.53039c0.52476,0.43654 0.83968,1.10548 1.05468,1.50864c0.40161,0.75314 0.67178,1.25589 1.11094,1.72655c0.41653,0.44641 0.87553,0.72744 1.29939,1.17938c0.44461,0.4741 0.88615,0.88253 1.30978,1.27546c0.54502,0.50553 0.84897,0.95529 1.39816,1.41961c0.3745,0.31663 0.94443,0.74591 1.30824,1.04503c0.57233,0.47057 1.0785,0.83807 1.61961,1.13194c0.47067,0.25563 1.00735,0.54517 1.50541,0.95871l0.497,0.33588l0.28026,0.4003l0.60322,0.03868" opacity="0.26" id="svg_38" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m107.95371,53.29858c0.62982,0.04279 1.16927,0.17323 1.59862,0.53039c0.52476,0.43653 0.83968,1.10546 1.05468,1.50863c0.40161,0.75315 0.67178,1.25589 1.11094,1.72656c0.41653,0.44641 0.87553,0.72743 1.29939,1.17938c0.44461,0.47409 0.88615,0.88252 1.30978,1.27546c0.54502,0.50553 0.84897,0.95529 1.39816,1.41961c0.3745,0.31663 0.94443,0.74591 1.30824,1.04503c0.57233,0.47057 1.0785,0.83806 1.61961,1.13194c0.47068,0.25562 1.00735,0.54516 1.50541,0.95871l0.497,0.33588l0.28026,0.40028l0.60322,0.03868" opacity="0.26" id="svg_40" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m49.61893,12.09171c0.62982,0.04279 1.16925,0.17324 1.59861,0.53039c0.52477,0.43653 0.83969,1.10548 1.05468,1.50864c0.40161,0.75314 0.67178,1.25589 1.11094,1.72655c0.41653,0.44641 0.87554,0.72744 1.29939,1.17938c0.44462,0.47409 0.88616,0.88253 1.30979,1.27546c0.54502,0.50553 0.84897,0.95529 1.39816,1.4196c0.37452,0.31663 0.94444,0.74591 1.30824,1.04504c0.57233,0.47057 1.0785,0.83807 1.6196,1.13194c0.47069,0.25563 1.00735,0.54517 1.50543,0.95871l0.49699,0.33588l0.28027,0.4003l0.60322,0.03868" opacity="0.26" id="svg_41" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m16.3641,33.13739c0.60806,-0.16746 1.16065,-0.22251 1.68637,-0.02756c0.64254,0.23825 1.16611,0.76477 1.50539,1.07381c0.6338,0.57727 1.05886,0.96195 1.63229,1.2606c0.54389,0.28327 1.07173,0.39669 1.62439,0.68278c0.57974,0.3001 1.1343,0.53935 1.66676,0.76988c0.68502,0.29661 1.12394,0.62019 1.79891,0.87657c0.46029,0.17483 1.14292,0.39138 1.58719,0.55324c0.6989,0.25465 1.3005,0.43399 1.91007,0.53241c0.53024,0.08562 1.13417,0.18143 1.74376,0.40684l0.58223,0.15257l0.39984,0.28478l0.5816,-0.16257" opacity="0.26" id="svg_42" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m131.80683,27.14615c0.39231,-0.48795 0.80669,-0.85277 1.3482,-0.99973c0.66185,-0.17962 1.3991,-0.05701 1.85769,-0.0036c0.85669,0.09977 1.42973,0.16469 2.07163,0.074c0.60883,-0.08601 1.1035,-0.30018 1.72109,-0.389c0.64786,-0.09317 1.23911,-0.22101 1.80727,-0.34307c0.73097,-0.15702 1.27886,-0.14958 1.97774,-0.33333c0.47659,-0.12531 1.15795,-0.34575 1.61385,-0.47226c0.71722,-0.19902 1.31084,-0.40259 1.86272,-0.67625c0.48007,-0.23805 1.02582,-0.51055 1.65335,-0.68147l0.56201,-0.21401l0.49316,-0.0013l0.37381,-0.46865" opacity="0.26" id="svg_43" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m79.82997,55.16913c0.62983,0.04278 1.16926,0.17322 1.59861,0.53039c0.52477,0.43653 0.83969,1.10547 1.05468,1.50863c0.40161,0.75314 0.67178,1.25589 1.11094,1.72656c0.41653,0.44641 0.87554,0.72743 1.29939,1.17938c0.44462,0.47409 0.88616,0.88252 1.30979,1.27546c0.54502,0.50553 0.84897,0.95529 1.39816,1.41959c0.37452,0.31663 0.94444,0.74592 1.30824,1.04505c0.57233,0.47057 1.0785,0.83806 1.6196,1.13194c0.47069,0.25562 1.00735,0.54516 1.50543,0.9587l0.49698,0.33589l0.28027,0.40028l0.60322,0.03868" opacity="0.26" id="svg_44" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m78.83503,3.91813c0.56358,0.28066 1.00935,0.60749 1.26446,1.10108c0.31179,0.60329 0.33874,1.34036 0.3782,1.79425c0.0737,0.84788 0.1248,1.41467 0.34429,2.01661c0.20817,0.57094 0.52056,1.00572 0.73328,1.58455c0.22315,0.6072 0.4693,1.1527 0.70505,1.67708c0.30332,0.67461 0.4064,1.20551 0.72977,1.84374c0.22052,0.43523 0.57678,1.04912 0.79432,1.46414c0.34223,0.65286 0.66406,1.18539 1.04706,1.66346c0.33316,0.41586 0.71377,0.88824 1.01001,1.4601l0.32581,0.49988l0.10074,0.47624l0.54068,0.26668" opacity="0.26" id="svg_45" stroke="#76d155"/>
    <path fill="none" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m105.0753,18.51677c0.39231,-0.48795 0.80669,-0.85277 1.3482,-0.99973c0.66185,-0.17962 1.3991,-0.05701 1.85769,-0.0036c0.85669,0.09977 1.42973,0.16469 2.07163,0.074c0.60883,-0.08601 1.1035,-0.30018 1.72109,-0.389c0.64786,-0.09317 1.23911,-0.22101 1.80727,-0.34306c0.73096,-0.15703 1.27885,-0.14958 1.97773,-0.33333c0.47659,-0.12531 1.15795,-0.34575 1.61386,-0.47226c0.71722,-0.19902 1.31083,-0.40259 1.86271,-0.67626c0.48007,-0.23805 1.02582,-0.51055 1.65335,-0.68147l0.56201,-0.21401l0.49316,-0.0013l0.37381,-0.46865" opacity="0.26" id="svg_46" stroke="#76d155"/>
   </g>
  </g>
 </g>
</svg>
      <p>ABOUT</p></a>
    
  <a href = "https://github.com/gabrielajohnson" target="_blank" class = "menu-item cheese">
<svg viewBox="0 0 180 100">
 <g>
  <title>Layer 2</title>
  <g stroke="null" id="svg_1">
   <path stroke="null" id="svg_8" d="m176.97873,14.12874l0.01669,-2.82575l-3.33444,2.75816l3.31775,0.06759l-0.00001,0l0.00001,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#dda250"/>
   <path stroke="null" id="svg_7" d="m2.47069,62.37653l0.06079,-4.56333l4.54825,-0.18945l-4.60903,4.75277l0,0.00001l-0.00001,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#dda250"/>
   <path stroke="null" id="svg_4" d="m2.4,62.36353l49.43494,-52.01427c39.96868,1.24736 85.19639,2.49468 125.16507,3.74202l-48.38314,56.1305l-126.21688,-7.85827l0.00001,0l0,0.00001z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#dda250"/>
   <path stroke="null" id="svg_2" d="m2.4,57.67849l49.43494,-49.93368c39.96868,1.19746 85.19639,2.39489 125.16507,3.59235l-48.38314,53.88527l-126.21688,-7.54394l0.00001,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#ffe771"/>
   <path stroke="null" id="svg_5" d="m140.54639,34.83576l10.95865,-13.80074l0,0c1.43562,-1.80794 3.15839,-1.97912 3.84794,-0.38236c0.68954,1.59677 0.08474,4.35682 -1.35088,6.16476l-10.95865,13.80074l0,0c-1.43561,1.80793 -3.15839,1.97912 -3.84794,0.38236c-0.68954,-1.59677 -0.08474,-4.35682 1.35088,-6.16476z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" fill="#ffeea3"/>
  </g>
 </g>
</svg>
    <p>MENU</p>
    
    </a>
    <a href = "https://medium.com/@gabrielajohnson" target="_blank" class = "menu-item meat">
      <svg viewBox="0 0 180 100">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 2</title>
  <g stroke="null" id="svg_2">
   <path stroke="null" fill="#653b3e" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m4.6704,45.43626c0,0 -1.40177,-5.73423 -1.40177,-8.1235c0,-2.38926 2.33628,-2.38926 3.27079,-4.77853c0.93451,-2.38926 -2.33628,-3.82282 -0.46726,-5.73423c1.86902,-1.91141 6.07433,-2.38926 5.7566,-2.56128c-0.31773,-0.17202 1.71949,-0.78368 4.05577,-1.26154c2.33628,-0.47785 8.41061,0 12.14866,-0.95571c3.73805,-0.95571 0,-6.21209 6.54158,-6.68994c6.54158,-0.47785 10.74689,0.47785 14.01768,-0.47785c3.27079,-0.95571 1.86902,-4.77853 6.07433,-4.77853c4.2053,0 10.74689,1.43356 14.48494,0.95571c3.73805,-0.47785 3.73805,-2.38926 7.00884,-1.91141c3.27079,0.47785 8.87787,2.86712 12.14866,2.38926c3.27079,-0.47785 7.94335,-1.43356 12.14866,-2.86712c4.2053,-1.43356 9.34512,3.82282 13.08317,4.30068c3.73805,0.47785 7.94335,-0.95571 10.27963,-0.47785c2.33628,0.47785 5.60707,3.34497 7.94335,3.34497c2.33628,0 4.2053,-0.95571 7.00884,0c2.80354,0.95571 7.49853,4.31597 10.29459,1.96493c2.79606,-2.35104 6.94156,-0.49314 9.28531,1.41062c2.34376,1.90377 6.0519,1.95728 8.38071,2.43514c2.3288,0.47785 3.65207,1.74703 6.58644,7.10663c2.93437,5.3596 0.49716,6.67465 0.0299,8.10821c-0.46726,1.43356 -2.80354,1.91141 -2.80354,3.34497c0,1.43356 0.93451,6.21209 -0.93451,7.64564c-1.86902,1.43356 -7.00884,0 -8.41061,2.86712c-1.40177,2.86712 -1.86902,8.1235 -5.13982,8.1235c-3.27079,0 -10.74689,-4.77853 -12.14866,-1.91141c-1.40177,2.86712 -3.73805,5.73423 -5.60707,5.73423c-1.86902,0 -7.00884,-1.43356 -9.81238,-0.47785c-2.80354,0.95571 -5.60707,4.30068 -8.87787,4.30068c-3.27079,0 -5.13982,2.38926 -8.41061,1.91141c-3.27079,-0.47785 -6.54158,-4.30068 -8.87787,-2.86712c-2.33628,1.43356 -5.60707,5.73423 -7.94335,5.25638c-2.33628,-0.47785 -8.87787,-5.73423 -10.74689,-5.25638c-1.86902,0.47785 -8.87787,1.43356 -11.21415,1.43356c-2.33628,0 -7.4761,-2.38926 -7.79382,-2.56128c-0.31773,-0.17202 -2.95307,-1.26154 -3.88758,-1.26154c-0.93451,0 -5.60707,1.43356 -7.94335,1.43356c-2.33628,0 -4.67256,-1.91141 -7.4761,-1.91141c-2.80354,0 -5.13982,-2.38926 -7.4761,-2.38926c-2.33628,0 -11.21415,1.91141 -14.48494,0.95571c-3.27079,-0.95571 -3.73805,-5.25638 -7.4761,-5.73423c-3.73805,-0.47785 -7.00884,-1.43356 -8.87787,-2.86712c-1.86902,-1.43356 -2.33628,-7.16779 -2.33628,-7.16779z" id="svg_10"/>
   <path stroke="null" fill="#5d363a" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m4.80949,48.52494c0,0 -1.40177,-5.73423 -1.40177,-8.1235c0,-2.38926 2.33628,-2.38926 3.27079,-4.77853c1.40177,-7.64565 5.60707,-0.47786 9.49466,2.6951c3.88759,3.17296 6.85931,2.56128 10.59736,1.60557c3.73805,-0.95571 5.60707,5.73423 12.14866,5.25638c6.54158,-0.47785 11.21415,1.43356 14.48494,0.47785c3.27079,-0.95571 9.34512,0.95571 13.55043,0.95571c4.2053,0 7.4761,-0.00001 11.21415,-0.47786c3.73805,-0.47785 7.94335,0.00001 11.21415,0.47786c3.27079,0.47785 6.54158,0.9557 9.81239,0.47784c3.27079,-0.47785 7.00884,-1.43356 11.21415,-2.86712c4.2053,-1.43356 6.54158,-1.43356 10.27963,-0.95571c3.73805,0.47785 7.29245,-0.75037 7.94335,-0.47785c0.6509,0.27251 7.27029,-0.01197 10.07383,0.94373c2.80354,0.95571 5.99652,-2.53129 8.33281,-2.53129c2.33628,0 4.0384,-1.85452 6.84194,-0.42096c2.80354,1.43356 5.4958,-2.37772 7.36482,-1.89986c1.86902,0.47785 8.97241,-8.03794 10.37417,-6.12653c1.40177,1.91142 2.33628,5.73424 1.86902,7.1678c-0.46726,1.43356 -2.80354,1.91141 -2.80354,3.34497c0,1.43356 0.93451,6.21209 -0.93451,7.64564c-1.86902,1.43356 -7.00884,0 -8.41061,2.86712c-1.40177,2.86712 -1.86902,8.1235 -5.13982,8.1235c-3.27079,0 -10.7469,-4.77853 -12.14867,-1.91141c-1.40177,2.86712 -3.73805,5.73423 -5.60707,5.73423c-1.86902,0 -7.00884,-1.43356 -9.81238,-0.47785c-2.80354,0.95571 -5.60707,4.30068 -8.87787,4.30068c-3.27079,0 -5.13982,2.38926 -8.41061,1.91141c-3.27079,-0.47785 -6.54158,-4.30068 -8.87787,-2.86712c-2.33628,1.43356 -5.83882,3.12724 -8.1751,2.64938c-2.33628,-0.47785 -8.64612,-3.12724 -10.51515,-2.64938c-1.86902,0.47785 -8.87787,1.43356 -11.21415,1.43356c-2.33628,0 -7.4761,-2.38926 -7.79382,-2.56128c-0.31772,-0.17202 -2.95307,-1.26154 -3.88758,-1.26154c-0.93451,0 -5.60707,1.43356 -7.94335,1.43356c-2.33628,0 -4.67256,-1.91141 -7.4761,-1.91141c-2.80354,0 -5.13982,-2.38926 -7.4761,-2.38926c-2.33628,0 -11.21415,1.91141 -14.48494,0.95571c-3.2708,-0.95571 -3.73806,-5.25638 -7.47611,-5.73423c-3.73805,-0.47785 -7.00884,-1.43356 -8.87787,-2.86712c-1.86902,-1.43356 -2.33628,-7.16779 -2.33628,-7.16779z" id="svg_11"/>
  </g>
 </g>
</svg>
      <p>CONTACT</p></a>
  <div class = "menu-item bottombun">
    <svg viewBox="0 0 200 110">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
  <defs>
  <linearGradient id="svg_4">
   <stop offset="0" stop-color="#ff7f00"/>
   <stop offset="1" stop-color="#f9c55d"/>
  </linearGradient>
 </defs>     
   <g>
  <title>Layer 2</title>
  <g stroke="null" id="svg_18">
   <path stroke="null" id="svg_17" d="m18.54025,53.10625c0,0 6.9851,-14.30517 79.37612,-13.62397c72.39101,0.68119 81.91614,14.30517 81.48436,13.65123c-0.43179,-0.65394 11.22694,61.28064 -83.38939,57.19345c-94.61633,-4.08719 -77.47109,-57.22071 -77.47109,-57.22071z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="url(#svg_4)"/>
   <ellipse stroke="null" ry="14.98638" rx="71.75601" id="svg_15" cy="57.19345" cx="98.55138" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#fbcd6c"/>
  </g>
 </g>
</svg>
    </div>
</div>
</div>
</div>
</nav>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Fredoka+One');
@import url('https://fonts.googleapis.com/css?family=Chewy');

html,body{
  height:100%;
  width:100%;
  padding:0;
  margin:0;
  overflow:hidden; 
}

svg{
  height:100%;
}

body{
  display:flex;
  justify-content:center; 
}

/*h1{
  font-family: 'Chewy', cursive;
  color:white;
  font-weight:lighter;
  font-size:30px;
  padding:0px 0px 0px 10px;
  transform: rotate(-10deg);
  letter-spacing:1px;
  white-space:wrap;
  margin-top:2px;
}*/

nav{
  width:100%;
  height:90px;
  display:flex;
  justify-content:space-between;
  flex-wrap:none;
}

.hamburger-menu{
  position:relative;
  top:0px;
  right:0;
  height:100%;
  margin:auto;
}

a{
  pointer-events: none;
  cursor: default;
}

#menu{
  width:200px;
  position:relative;
  height:100%;
}

.topbun{
  /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/topbun.png?raw=true);
  background-size:100% 100%;*/
  width:auto;
  z-index:5;
  
}

.tomato{
  /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/tomato.png?raw=true);
  background-size:95% 100%;*/
  background-position:8px;
  width:auto;
  z-index:4;
  color:#8b2220;
  transform:translateY(40px);
}

.lettuce{
  /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/lettuce.png?raw=true);
  background-size:100% 100%;*/
  width:auto;
  z-index:3;
  color:#53a037;
  transform:translateY(60px);
}

.cheese{
  /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/cheese.png?raw=true);*/
  background-size:100% 100%;
  width:auto;
  z-index:2;
  color:#dca250;
  transform:translateY(75px);
}

.meat{
 /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/meat.png?raw=true);*/
  background-size:100% 100%;
  width:auto;
  z-index:1;
  color:#926263;
  transform:translateY(80px);
}

.bottombun{
  /*background:url(https://github.com/gabrielajohnson/Codepen-Assets/blob/master/hamburger/bottombun.png?raw=true);*/
  background-size:100% 100%;
  width:auto;
  transform:translateY(80px);
}

.menu-item{
  position:absolute;
  width:100%;
  font-family: 'Fredoka One', arial;
  font-weight: bold;
  font-size: 0.8em;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:transform 0.3s;
  height:100%;
}

.menu-item p{
   position: absolute;
   margin: 0;
   height: 60%;
   font-size: 2em;
  
}

/*#menu:active{
  .menu-item{
    transition:margin 0.3s;
    margin:-20px 0px;
  }
  
}*/

input{
  position:absolute;
  top: 0;
  z-index: 1000;
  width: 200px;
  height: 100px;
  opacity:0;
  cursor:pointer;
}

input:checked{
  top:0;
  height:100px;
}

input:checked + #menu .tomato{
    transform: translateY(90px);
    transition:transform 0.3s; 
}

input:checked + #menu .lettuce{
    transform: translateY(170px);
    transition:transform 0.3s;
}


input:checked + #menu .cheese{
    transform: translateY(250px);
    transition:transform 0.3s;
}

input:checked + #menu .meat{
    transform: translateY(330px);
    transition:transform 0.3s;
}

input:checked + #menu .bottombun{
    transform: translateY(370px);
    transition:transform 0.3s;
}

input:checked + #menu a{
    pointer-events: auto;
    cursor: pointer;
}

              
            
!

JS

              
                
              
            
!
999px

Console