Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

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

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="main-head">
    <a href="#" class="main-logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1166 354">
            <g class="main-logo__brand-partners">
                <path d="M973 224.2c3 2.1 5 10.4 3 14-3 .4-2-3.3-3-5-2.4.9-1 5.6-5 5-1-1.3-1-3.7-2-5-2.2.7-.3 5.7-4 5-1-2.6.7-9.6 2-13 3.3 0 3.9 2.8 4 6 3.6-.4 3-5 5-7"/>
                <path d="M960 224.2c1.3 4-2.9 2.4-3 5v9c-4.6.6-2.5-5.5-3-9-.2-2-2.6-2-4-3 .5-3.5 6.6-1.5 10-2"/>
                <path d="M936 235.2c-5.6 3-10-4-17-4-6.5 0-13.5 3.3-14 10-1.2 16.8 35.5 14 36 36 .3 11.4-8.4 21-30 19-5-3.7-16.6-4.8-14-13 3.9-5.2 6.4.5 10 2 3.5 1.4 7.8 4.1 12 4 6.2-.2 13-3.5 13-11 0-17.3-41.9-13-35-41 4.1-10 13.3-14.8 29-13 3.5 3.2 11.7 1.7 11 9-1 0-.7 1.2-1 2z"/>
                <path d="M837 260.2h24c6-3.6 9.6-8.8 9-15-1.2-13.1-17-12.8-33-12v27zm28 7c1.2 5 4.6 9.4 7 14 2.4 4.4 6 9.1 5 14-9.8 2.4-11.4-5.8-14-11l-8-16h-18c0 4.3.2 9.9 0 15 0 4.4 1.5 10.1-2 12h-4c-4.7-1.2-2.9-9.1-3-15-.2-15.7.2-35.7 0-52 .6-.8 1-1.6 1-3h1c20 0 37.7-2.3 45 8 .9 1.2.4 2.7 1 4 1 1.7 3.1 5.2 3 10-.2 10-6.6 14.9-14 20z"/>
                <path d="M807 228.2c0 6.4-9.4 4-16 4h-19c-2.2 5.8-.4 15.6-1 23 4 1.8 10.7.9 17 1 5.4.1 13.1-2 14 3 .3 6.4-8.7 3.9-14 4h-17v24c7 2.5 19.2 0 29 1 3 .3 6.7-1 7 3 .5 4.5-3.7 4.3-8 4h-36a494 494 0 0 1 0-70h36c3.9-.2 8-.6 8 3"/>
                <path d="M679 224.2h2c6.8 1.4 9.3 8.4 13 13 2 2.4 30.3 38.5 34 41v-45c-.5-5.2-.2-9.6 6-8 4-.6 1.2 5.5 2 8-.6 20.7 1.4 44-1 63-3.8.9-6-2.7-8-5-.7-.8-30-38.7-40-50v45c.4 5.3.8 10.8-6 9-3.8.8-1.2-4.7-2-7v-64z"/>
                <path d="M615 225.2h38c3.6.5 9.7-1.6 9 3 .3 7.6-12.1 2.5-18 4-1.8 9-1 21-1 32 0 11.5 1.5 22.7-2 31h-4c-5.3-1.8-2.9-9.6-3-14-.3-14.6.3-33.7 0-49-6.1-.5-14.4 1.1-19-1v-6z"/>
                <path d="M560 260.2h24c6-3.6 9.6-8.8 9-15-1.2-13.1-17-12.8-33-12v27zm28 7c1.2 5 4.6 9.4 7 14 2.4 4.4 6 9 5 14-7.9 1.3-9.3-1.5-12-7-2.8-5.7-6-14.3-10-20h-18c0 4.3.2 9.9 0 15 0 4.4 1.5 10.1-2 12h-4c-4.7-1.2-2.9-9.1-3-15-.2-15.6.2-35.7 0-52 .6-.8 1-1.6 1-3 18.2.4 38.2-3 46 8 .9 1.2.4 2.7 1 4 1.7 3.3 4.4 9.9 2 17-2 5.9-7.6 8.6-13 13z"/>
                <path d="M498 248.2l-5 11c-1.8 4.4-5 8.3-4 12h26c-2.3-11.6-8.6-19.4-12-30 0-.6-.1-1.2-1-1-2 1.4-2.8 5.4-4 8zm4-24c4.6 0 3.5 5.9 6 8 6.8 15.5 13.7 31.9 21 48 2.2 4.7 6.5 9.5 5 15-12.5 1.9-9.7-11.6-15-17h-34c-2.8 2.7-3.3 7.2-6 11-2.5 3.5-.5 8-10 6 .4-6.7 4.5-12.4 7-18 7.5-16.5 14.1-33.7 23-50-.2-1.6 1-1.7 1-3h2z"/>
                <path d="M424 261.2c16.8 4.2 30.8-2.1 30-15-.1-3.1-2.2-7.3-4-9-5.2-5-15-4-26-4v28zm0 9c-.1 3.8.3 9.2 0 14-.2 4.1 1.8 11-3 11-8.4 2.2-5.8-6.5-6-14-.3-15.4.3-40.8 0-53-.2-1.6 1-1.7 1-3h30a23.5 23.5 0 0 1 13 34c-1 1.8-2.4 3-3 5-3.5 2.1-7.2 4-11 6h-21z"/>
                <path d="M345 282.2c5.5-4 7.2-7.2 9-13 1-3 2-6.5 2-9 0-4.9-2.2-13.2-4-15-3.8-4-7.2-7.7-10-9a58.3 58.3 0 0 0-28-4v55c15 1 24.5-.2 31-5m-40 12v-66c0-1.7.8-2.6 2-3 16 1 26.6-2.1 37 2 5 2 12.8 9.4 16 15a37.4 37.4 0 0 1 0 36 40 40 0 0 1-16 15c-9.4 3.7-25.9 2.1-39 1"/>
                <path d="M272 225.2c9.4-2.7 6.8 7.7 7 13a567 567 0 0 1-1 58c-4.2 1.2-5.7-2.6-8-5-5.6-6-11.3-14-17-21-7.5-9.4-14.5-19.5-23-28-3 15.3 1 37.7-2 53-8.8 2.5-7-5.7-7-12v-56c-.2-1.6 1-1.7 1-3h2c4-1 5 3.7 7 6 1.8 2 32.3 40.3 39 48 3-15.4-1-37.6 2-53z"/>
                <path d="M158 271.2h27c-3.3-11-8.2-20.5-13-30 0-.6-.1-1.2-1-1-4.3 10.3-9.8 19.5-13 31zm13-47c4-.3 4.8 4.7 6 7 7 13.6 13.2 29.9 20 45 2.7 6 6.8 12.1 7 19h-6c-3.6-.8-3.7-5.3-5-8-1.4-3-3.4-5.9-4-9h-34c-6.6 4.4-2.7 19.2-16 17-.3-7 4.5-12.4 7-18 1.3-3 1.8-6.2 3-9 1.3-3 2.8-5.3 4-8 5.5-12 11-23.3 16-36h2z"/>
                <path d="M84 260.2c8.6-.5 19 1 26-1 9.4-6.2 9-18.5 1-24-5.8-4-16.9-1-27-2v27zm28 7c3.4 10 10.1 16.6 13 27-10.2 5-11.2-4.6-14-10-3-6-6.5-11.6-9-16H84c0 4.3.2 9.9 0 15 0 4.4 1.5 10.1-2 12h-4c-3 .2-2.7-4.3-3-6-2.2-17 1.7-42.6 0-61 .6-.8 1-1.6 1-3h1c18.5 0 36-2.5 44 7 8.6 10.2 5.2 29-9 35z"/>
                <path d="M15 287.2c11.9 2.8 27.6 1.7 29-9 .5-3.4-.4-5.7-2-10-5-5.3-16.7-4-27-4v23zm0-54v23c8.8-.3 19.4 1.4 24-3 4-4 4-14 0-18-4.8-3.4-17-4.1-24-2zm28 26c4.8 4 10.5 7.7 11 15 .9 10.4-7 18.4-16 21H7c-1.6-21-1.6-49 0-70 7.8 1.2 22.5-1.7 30 0 7.2 1.6 10.5 7 14 12 1.1 11.1-1.7 18.3-8 22z"/>
            </g>
            <g class="main-logo__signal">
                <path d="M1111 48.2c2 2.2 4.7-3.3 7-4 6.5-5.9 13.3-11.4 20-17 6.5.5 15.2-1.2 20 1 .5 4-3.7 5.9-6 8-6.2 5.9-14.1 11.5-21 18-.4 3.1 2.5 4 4 6l13 16c5.9 7.1 12.5 13.6 17 22-2.6 3.4-10.4 1.5-16 2-4.8-2-10-9.6-16-17-2-2.6-5-5.6-8-9-1.9-2.3-5.5-8.9-7-9-2.7-.2-2.7 1.2-7 5v29c-3.9 1.8-13 1.3-17 0 .7-31.7-1.3-66 1-96a24 24 0 0 1 15 0c2.3 13 .4 30.3 1 45z"/>
                <path d="M1063 47.2c-5.5-5.5-22.4-11-27-1 .6 6.1 9.3 7.2 15 9 6.2 2 12 3.7 17 6 4.5 5.3 9.2 7.9 10 15 .6 5-1.3 11.1-3 15-1 2.3-3.9 4.7-8 7-14.5 8.3-44.1 2-51-10 .8-6.2 6.2-7.9 10-11 6.5 2.9 16.7 10.5 26 9 3.7-.6 7-2.6 9-6-.7-6.2-7.6-8.2-13-10-3-1-6.6-1.3-10-2-22-4.9-21.6-21.9-18-30 .3-.5 4.1-7 11-11 5.8-3.3 15.7-2.8 22-2 9 1.1 17.1 6 21 11-2 5.2-7.6 7-11 11z"/>
                <path d="M1004 37.2c-.3 7-7.6 7-10 12-7.8-4-13.4-10.8-25-7-5 1.6-12.7 8.9-14 15-3 15.1 8.7 32.2 26 28 5.7-1.4 7.3-4.5 13-9 5 2.3 8.7 6 12 10a35.5 35.5 0 0 1-35 16 38.3 38.3 0 0 1-27-17 36.3 36.3 0 0 1-7-18c-1.8-24.3 16.7-45.4 47-42 8 2.8 15 6.4 20 12"/>
                <path d="M976 173.2a54.6 54.6 0 0 1 0 23c-4.5 3.6-17.9 2.2-24 1a54 54 0 0 1 0-23c-.1-1.2.3-1.8 1-2 5.8-1.6 18.7-2.1 23 1"/>
                <path d="M857 27.2c7.3-1.2 5.8 6 6 14 1.4 40.2-1 92 0 129 17 2 39 .8 59 1 6.1 0 12.4-1.1 17 2 1.4 5.9 2.5 19.6-1 24-31.7 1.7-70.3 1.6-102 0-2.3-48-.3-100.3-1-150 .8-3.5 4.1-5.6 7-8 4.1-3.3 9.7-8.4 15-12"/>
                <path d="M791 198.2c-4.8.2-10-.2-14 0-8.8-15.2-15.9-32-25-47-14-.4-29.7.5-45 0-4.5-.2-9.8 1.1-13-2 1.7-10 7.2-16.1 11-24h34c-7-16.3-16.3-30.3-23-47-7.4 8.7-10.8 19.7-16 30-2.8 5.6-8.1 15.3-16 29-5.3 10-10 20.8-15 31-5 10.3-10.4 19.8-15 30-8.8-.5-19.7 1-27-1-1-7.3 4.2-14.8 8-22 24.7-46.3 49.4-97.1 74-145a5 5 0 0 1 3-3c10-2.7 74.5 132.1 82 147l5.4 10.3a41 41 0 0 1 3.6 10.7c-.8 4.6-7.2 2.8-12 3z"/>
                <path d="M476 27.2c2.7 1.1 5.2 3.9 7 6l3 4c1.9 2 38.2 45.8 50 60 11.8 14.1 23.5 28.6 36 42v-85c0-8.9-1.2-18.2 2-26a64.2 64.2 0 0 1 25 0c3.3 5.9 2 13.5 2 20v130c0 6.6 1.3 13.4-2 19-4.4.9-7.5 1.9-12 1-3.8-.7-4.7-2.5-8-6-5-5.3-13.6-15.9-18-21-21.1-25-39.5-47.1-60-72-3.9-4.8-7.4-10.3-13-13-.6 36.7 1.3 76-1 111a66.2 66.2 0 0 1-25 0c-3.4-11.7-2-25.7-2-41v-84c0-14.7-.8-28.8 1-42a5 5 0 0 1 3-3h12z"/>
                <path d="M392 66.2c-7-3.1-12.6-8.2-20-11-3.1-1.2-5.2-2.2-9-3-35.2-3.2-57 12.8-67 37-16.6 40.3 14.3 89.4 63 84 12.7-1.4 19.4-6.4 30-13v-34c-15-.4-31.7.5-48 0-4.3-.1-9.8 1.3-13-2-3.4-4 1.1-5.8 3-8 1.8-2 5.1-4.4 7-6 4.6-3.8 9.4-8.4 14-11 21 .6 44.6-1.3 64 1 2.3 20.7.4 45.6 1 68a94.6 94.6 0 0 1-73 32 87.8 87.8 0 0 1-52-153 87 87 0 0 1 48-22 93 93 0 0 1 49 8 48 48 0 0 1 20 16c-2.8 8.5-9.9 13.5-17 17z"/>
                <path d="M211 27.2c6.4 1 4 11 4 18 0 47.8.9 103.9-1 151-5 3.3-20.8 3-26 0-2.3-47.7-.3-99.7-1-149 2-4.5 16.8-15 20-18a7 7 0 0 1 3-2h1z"/>
            </g>

            <path class="main-logo__s" d="M127 54.2c-1.8 4.2-7 5-9 9-5.2-2.9-10.8-9-18-13a68 68 0 0 0-43-8c-10.5 1.4-22.4 7.2-22 20C36 72.5 46 77 54 80.2c13.5 5.3 28 7 42 12 4 1.4 8 4 12 6 6.2 3 11.6 5.6 17 10 2.6 2 3.8 3.9 6 6 10.5 10.3 8.5 27.2 8 32a50.2 50.2 0 0 1-18 32c-.7.6-1.3.4-2 1-2 2-12.4 6.6-17 8a98.3 98.3 0 0 1-32 3c-20.5-1-39.6-8.4-54-18-5.5-3.8-11.7-7.8-12-11-.8-8.6 13.8-13.7 18-19 5.4 2.4 11.4 8.8 20 13a74.5 74.5 0 0 0 42 8c14.1-1.5 28.5-8.5 27-24-1.4-10.5-11.2-14.4-20-18-17.7-7.3-37.4-10.5-55-19-10.4-5.1-19.9-10.6-25-20-5-9.4-5.9-23.2-2-35 .5-1.5 2.9-5.6 3-6 1.3-2.8 3.4-6.2 6-9 1.4-1.4 3.5-2.7 5-4 11-9.6 32-15.2 56-13a98.6 98.6 0 0 1 40 14c1.2.7 4.7 3.8 5 4 3.5 1.6 10.6 6 12 11-.5 5.8-5 7.7-9 10z"/>
            <path class="main-logo__bar" d="M138 347.2c-41 1.7-89 1.7-130 0-2.7-4.7-4-20.9 1-24a7 7 0 0 1 3-2h96c10.3 0 21-1.5 30 2 1.8 6 1.5 18 0 24z"/>
        </svg>
    </a>
    <div class="main-nav">
        <a href="javascript:void(0);" class="js-toggle main-nav__toggle">
            MENU
        </a>
        <nav class="main-menu">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Strategy</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>
<div class="faux-content main-torso">
    <h4>Example Content</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit urna quisque enim pretium inceptos, est integer nunc ante consequat habitant mattis ullamcorper senectus sagittis donec, eu a suscipit mauris at et risus pharetra magnis faucibus tellus. Ligula egestas nam aptent dolor vestibulum neque posuere rutrum nulla, tristique consectetur fermentum non amet urna inceptos at, ridiculus imperdiet fames aliquam venenatis fusce mauris mattis. Mattis mollis nostra orci quisque ipsum viverra, volutpat velit sociis rutrum elit vel, curae egestas dapibus mus lorem. Pharetra porta rutrum per neque montes laoreet auctor sociis congue elementum libero pulvinar egestas tempor, dapibus mus erat ultrices volutpat dolor fusce netus sem aptent placerat nulla blandit. Pharetra proin ut eleifend nisl tortor nam morbi tellus scelerisque, donec nibh luctus auctor natoque cursus arcu sit venenatis platea, non urna leo dignissim faucibus rutrum mollis est. In platea posuere cum convallis est erat natoque quisque lectus, habitant suscipit magna ante morbi porta et. Cubilia sit donec aliquet vivamus dapibus est convallis ipsum orci, metus turpis augue vestibulum elit volutpat mi laoreet, eros enim fermentum bibendum erat primis magnis dictum. Est metus ullamcorper orci non ac vehicula ut egestas aliquam, at suspendisse vestibulum mollis lobortis habitasse urna feugiat porttitor, torquent lectus neque lacinia varius ridiculus purus netus. Amet ligula nulla dui sagittis ultrices lobortis imperdiet facilisis, felis inceptos parturient habitasse ipsum faucibus litora sit, ante consequat porta pellentesque nibh blandit mi.</p>
    <p>Consectetur lacinia leo justo aptent fermentum imperdiet habitasse conubia, donec varius penatibus non morbi dictum mi, magnis est consequat per nisl ac nisi. Mattis dictumst vestibulum tristique arcu porttitor tortor integer, vivamus nascetur augue pretium ac montes habitasse suscipit, curae mollis sed cum dictum euismod. Fermentum ante euismod aptent sem pretium non neque nunc, aliquet integer fusce taciti sociis viverra habitant maecenas luctus, elit at ac tristique laoreet pellentesque lorem. Litora imperdiet orci justo ultricies nibh convallis mattis, parturient ornare a dolor vel bibendum sociis, vitae sapien laoreet et sem ligula. Quis eget consequat mus phasellus orci purus suspendisse bibendum tortor dui malesuada, facilisi fringilla dictum pharetra cursus nibh tempor non facilisis mi fames, sociosqu litora at porta et parturient vulputate lacus risus consectetur. Suspendisse arcu montes fermentum est ultrices varius inceptos mus turpis, nec class porttitor felis sed laoreet semper placerat ipsum a, sociosqu praesent rutrum egestas risus interdum imperdiet dapibus. Vitae lobortis laoreet ante urna nam magna quis, ac potenti lorem commodo sodales quam malesuada, nisl hendrerit donec sem mauris magnis. In ligula faucibus diam orci tempus litora primis urna iaculis, magna eget habitasse cubilia suscipit natoque sed potenti facilisis class, libero varius volutpat pellentesque tincidunt habitant aliquet congue.</p>
    <h4>Example Content</h4>
    <p>Ac natoque vestibulum sem ad magna pulvinar platea tincidunt primis, et habitant congue morbi neque magnis duis ornare mollis, in commodo nec quisque suspendisse molestie pretium sagittis. Morbi facilisi mus consequat nec magnis luctus sit auctor, justo vivamus nisl porta praesent neque dolor, diam dis donec tincidunt congue eget class. Donec quis fringilla pulvinar viverra porttitor condimentum facilisis ligula, aliquam purus rutrum dictum ridiculus integer congue tempor potenti, lectus orci sociis augue egestas proin placerat. Diam fermentum nisi fames consectetur nulla ornare sociosqu nunc molestie semper, vehicula dignissim posuere montes interdum curae scelerisque lectus fusce, ac leo odio ut dapibus nibh adipiscing platea morbi. Donec enim feugiat conubia viverra praesent sociosqu penatibus magnis posuere, sed dis consequat proin scelerisque imperdiet lacus turpis vel, class diam litora id cum sodales placerat netus.</p>
    <p>Habitasse risus metus ornare sit hendrerit in, nec vitae aptent sagittis justo tincidunt, adipiscing viverra eleifend vehicula lobortis. Habitant augue luctus fringilla congue penatibus aliquet risus iaculis, velit facilisis litora class curabitur lorem lacinia magnis eleifend, aptent dapibus duis tempor sodales mauris felis. Nisl primis nec suspendisse auctor taciti nam et ad semper dignissim felis, metus quisque consectetur dictum mus ut eget placerat ligula ornare dis, platea augue tincidunt class viverra pretium potenti bibendum torquent mollis. Id tempor eleifend ornare viverra sem nec mattis a, leo sollicitudin laoreet neque blandit et varius. Gravida porttitor blandit ligula enim aptent aliquam netus commodo placerat conubia lacinia tortor, class tristique adipiscing vehicula arcu facilisis nunc ultrices nisi augue ultricies.</p>
    <h4>Example Content</h4>
    <p>Eget nulla odio in nascetur cursus habitasse facilisis, potenti semper sed montes scelerisque dapibus nibh fermentum, nisl sociis placerat tempus tortor penatibus. Venenatis dapibus porttitor hendrerit aptent imperdiet hac sodales tristique, in justo vulputate ligula scelerisque sed aliquam conubia, enim ante congue facilisis purus a proin. Ac habitasse conubia mauris orci varius pulvinar at senectus morbi, aliquam parturient cum sollicitudin suspendisse tempor sem phasellus, tortor potenti consequat blandit integer nec bibendum egestas. Vivamus laoreet habitant auctor ad ipsum congue conubia ac, venenatis praesent hac aliquam ornare senectus mus. Pharetra aptent congue cum eleifend blandit molestie commodo eu morbi curabitur ridiculus, placerat ligula elit ullamcorper nisl vitae imperdiet mattis lorem. Netus iaculis feugiat luctus suspendisse ornare dictumst velit morbi potenti adipiscing, augue urna eros tortor mattis quam mollis nascetur erat, lobortis interdum condimentum lectus pharetra vestibulum dolor phasellus proin. Eu placerat convallis ornare at a egestas lectus magna inceptos eleifend, lobortis eget penatibus nostra non vivamus feugiat rutrum.</p>
</div>
<div class="faux-footer">
    You've Reached the Footer
</div>
!

CSS 

              
                // bariables (that's right, with a "b")
$color-1:               #EE3D37; // r e d
$color-1--light:        #BC9045; // g o l d
$color-1--dark:         #3E3737; // b r o w n
$color-drab:            #E6E5E4;
$color-drab--light:     #f0f0f0;
$color-drab--dark:      #3E3737;
$color-light:           #FFF; // w h i t e
$color-dark:            #000; // b l a c k
$font-size:             28;
$gap:                   25/$font-size * 1rem; // 25px given base font size;
$gap--big:              $gap*3.2;
$gap--baby:             $gap*2;

// extends
$dots-offset: -7em;
$dot-size: 1em;
%--dots {
    background-image: radial-gradient($color-drab--dark 10%, transparent 10%);
    background-size: $dot-size $dot-size;
    background-position: 0 0;
}
%--dots-block {
    position: relative;
    &:after {
        @extend %--dots;
        content: "";
        position: absolute;
        width: 5em;
        height: 13em;
        pointer-events: none;
    }
}

// styles
body {
    &.nav-active {
        overflow: hidden;
    }
}
.main-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    &:after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 100%;
        z-index: 0;
        background-color: rgba($color-light, .97);
        opacity: 0;
        transition: bottom 0ms 450ms, opacity 300ms 150ms;
        // &, /*DEBUG*/
        .nav-active & {
            bottom: 0;
            opacity: 1;
            transition: opacity 600ms;
        }
    }
}
.main-logo {
    position: absolute;
    left: $gap;
    top: $gap;
    z-index: 10;
    display: block;
    width: 6.25em;
    svg {
        width: 100%;
        height: auto;
    }
    path {
        transition: all 300ms, opacity 150ms;
        backface-visibility: hidden;
    }
    &__s {
        fill: $color-1;
    }
    &__bar {
        fill: $color-1;
        html body.head-shrink & { // gives it a specificity boost
            transform: translateY(-3.5em);
            transition-delay: 550ms;
        }
    }
    &__signal {
        fill: $color-1;
        .head-shrink & {
            path {
                transform: rotate(15deg) translateY(-5em);
                transform-origin: left top;
                opacity: 0;
            }
        }
        @for $i from 1 through 9 {
            path:nth-child(#{$i}){
                transition-delay: $i * 35ms;
            }
        }
    }
    &__brand-partners {
        fill: $color-1--dark;
        .head-shrink & {
            path {
                transform: rotate(15deg) translateY(-5em);
                transform-origin: left top;
                opacity: 0;
            }
        }
        @for $i from 1 through 15 {
            path:nth-child(#{$i}){ 
                transition-delay: $i * 35ms;
            }
        }
    }
}
.main-nav {
    &__toggle {
        position: absolute;
        right: $gap;
        top: $gap;
        line-height: .5; // fudge for font empty space
        z-index: 10;
        width: 3em;
        color: $color-1;
        transform: rotate(90deg);
        transform-origin: 1.42em 1.53em;
        text-decoration: none;
    }
}
.main-menu {
    @extend %--dots-block;
    overflow: hidden;
    display: flex;
    justify-content: center;
    text-align: right;
    position: fixed;
    z-index: 10;
    top: 4.2em;
    right: $gap;
    padding: $gap $gap $gap*3 $gap*2;
    max-width: 2px;
    max-height: 2em;
    transition: max-width 0ms 600ms, max-height 0ms 600ms;
    &:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 2em;
        background-color: $color-1--light;
        transition: width 300ms, height 300ms 300ms;
    }
    &:after {
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 5em;
        height: 7em;
        opacity: 0;
        transition: 300ms;
    }
    // &, /*DEBUG*/
    .nav-active & {
        max-width: 20em;
        max-height: 20em;
        transition:
            width 0ms 600ms,
            height 0ms 600ms,
            background-color 300ms 300ms;
        &:before {
            width: calc(100% - #{$gap*2});
            height: calc(100% - #{$gap*2});
            background-color: $color-1;
            transition:
                height 300ms,
                width 300ms 300ms,
                background-color 300ms 300ms;
        }
        &:after {
            opacity: 1;
            transition: 300ms 300ms;
        }
    }
    nav {
        display: flex;
    }
    ul {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        position: relative;
        display: inline-block;
        padding: .1em .5em;
        text-decoration: none;
        font-size: 1.4em;
        color: $color-light;
        opacity: 0;
        transition: 300ms;
        &:before {
            content: "";
            position: absolute;
            bottom: .2em;
            left: .5em;
            height: 5px;
            width: 1em;
            border-radius: .05em;
            background-color: $color-light;
            opacity: 0;
            transform: translateY(.1em);
            transition: 300ms;
        }
        &:hover {
            &:before {
                opacity: 1;
                transform: translateY(0);
            }
        }
        // &, /*DEBUG*/
        .nav-active & {
            opacity: 1;
            transition: 300ms 300ms;
        }
    }
}

// basic resets and dummy content
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,300i,400,400i');
*, *:before, *:after {
    box-sizing: border-box;
}
html {
    font-size: 28px;
    font-weight: 300;
    font-family: Roboto, sans-serif;
    line-height: 1.4;
    color: #3E3737;
}
.faux-content {
    padding: 4em 2em 2em;
}
.faux-footer {
    padding: 2em;
    background-color: $color-1--dark;
    text-align: center;
    color: #fff;
}
!

JS 

              
                window.scrollTo(0,600);setTimeout(function(){$(window).trigger('scroll')},250);console.clear(); // for codepen debugging

jQuery(function($){
   // /*DEBUG*/ setInterval(function(){ $('.js-toggle').trigger('click'); }, 2000);
    
    
    var nav = {
        init: function(){
            this.active = false;
            this.shrunk = false;
            this.$doc = $(document);
            this.$win = $(window);
            this.$bod = $('body');
            
            this.bindToggle(this);
            this.bindScroll(this);
        },
        bindToggle: function(obj){
            $('.js-toggle').each(function(){
                var $this = $(this);
                $this.on('click', function(){
                    if(obj.active){
                        obj.active = false;
                        obj.$bod.removeClass('nav-active');
                        console.log(obj.shrunk);
                        if(obj.shrunk){
                            obj.$bod.addClass('head-shrink');
                        }
                    } else {
                        obj.active = true;
                        obj.$bod.addClass('nav-active');
                        obj.$bod.removeClass('head-shrink');
                    }
                });
            });
        },
        bindScroll: function(obj){
            obj.$win.on('scroll', throttle(function() {
                obj.shouldShrink(obj);
                if (obj.shrunk) {
                    obj.$bod.addClass('head-shrink');
                } else {
                    obj.$bod.removeClass('head-shrink');
                }
            }, 100));
        },
        shouldShrink: function(obj){
            var pageTall = obj.$doc.height();
            var viewTall = obj.$win.height();
            var scrolled = obj.$win.scrollTop();
            var scrollPosition = viewTall + scrolled;
            if (50 >= scrolled || ((pageTall - scrollPosition) / pageTall === 0)) {
                obj.shrunk = false;
            } else {
                obj.shrunk = true;
            }
        }
    }
    nav.init();
});


/*------------------------------------*\
        ::Utilities
        ------------------------------
        ::Throttle
        ::Debounce
\*------------------------------------*/
/*------------------------------------*\
        ::Throttle
\*------------------------------------*/
function throttle(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
            deferTimer;
    return function () {
        var context = scope || this;

        var now = +new Date,
                args = arguments;
        if (last && now < last + threshhold) {
            // hold on to it
            clearTimeout(deferTimer);
            deferTimer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold);
        } else {
            last = now;
            fn.apply(context, args);
        }
    };
}

/*------------------------------------*\
        ::Debounce
\*------------------------------------*/
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}
!
999px

Console