Side Menu / Navigation - Mobile Only

[tomaszbujnowicz]

First of all, great great plugin. Thanks for all your hard work.

I think Mobile Only solution could be adjusted a bit. In your JS/CSS examples we have Menu markup two times in the code which doesn't seem to be very optimal due to many reasons.

Couldn't we just use Modernizr / JS browser size detector and then bind / unbind your script? That would do the trick.

Otherwise CSS method could be tweaked a bit to have only one markup code for the menu structure.
Furthermore CSS code can be adjusted just slightly.
e.g.

header .toggle-panel { 
    display: block;
}
@media only screen and (min-width : 768px) {
    header .toggle-panel {
        display: none;
    }
    .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;
    }
    .scotch-panel-top / right / left or bottom (depends on the direction used) {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
}

Anyway, a bit nasty method to use !important in the CSS though ;)

[whatnickcodes]

I know... Closing this per the destroy enhancement item