Side Menu / Navigation - Mobile Only with CSS

This demo shows how to make a mobile only side navigation. The Canvas is "closed" with CSS if left open and switched to desktop.

                
                header .toggle-panel { display: none; }
                header ul { display: block; }

                @media only screen and (min-width : 769px) {
                    /* Closes the Panel on window resize from small to large. */
                    /* Important tags aren't always bad otherwise you can close with JS on resize. */
                    .scotch-panel-canvas {
                        -o-transform: translate3d(0px, 0px, 0px) !important;
                        -ms-transform: translate3d(0px, 0px, 0px) !important;
                        -moz-transform: translate3d(0px, 0px, 0px) !important;
                        -webkit-transform: translate3d(0px, 0px, 0px) !important;
                        transform: translate3d(0px, 0px, 0px) !important;
                    }
                }

                @media only screen and (max-width : 768px) {
                    header .toggle-panel { display: block; }
                    header ul { display: none; }
                }
                
                

                
                $('#scotch-panel').scotchPanel({
                    containerSelector: 'body',
                    direction: 'right',
                    duration: 300,
                    transition: 'ease',
                    clickSelector: '.toggle-panel',
                    distanceX: '70%',
                    enableEscapeKey: true
                });