OffCanvas

The navigation that responsively goes off canvas, similar to an app style menu also can be revealed in many creative ways.
There are three mode of off-canvas navigation :

Slide on top

Add a class mn--slide to the #root to activate the offcanvas slide mode and toggle the class mn--show to show/hide the navigation.

<body>
    <div id="root" class="root mn--slide mn--show">
        ...
        ...
    </div>
</body>

Push

Add a class mn--push to the #root to activate the offcanvas push mode and toggle the class mn--show to show/hide the navigation.

<body>
    <div id="root" class="root mn--push mn--show">
        ...
        ...
    </div>
</body>

Reveal

Add a class mn--reveal to the #root to activate the offcanvas reveal mode and toggle the class mn--show to show/hide the navigation.

<body>
    <div id="root" class="root mn--reveal mn--show">
        ...
        ...
    </div>
</body>