Side Menu / Navigation - Mobile Only with JS

This demo shows how to make a mobile only side navigation. The panel will be closed with JS if left open and switched to desktop.

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

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

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

                $(window).resize(function() {
                    if ($(window).width() >= 769 && $('.scotch-panel-canvas').hasClass('scotch-is-showing')) {
                        scotchPanel.close();
                    }
                });