How do I add break point to slide and push responsive menu

Question

I have two menus on my responsive site. A horizontal menu when the browser width is greater than 1024px and the Slide and Push (Right) Menu when the browser window is less than 1024px (I'm using the slide push menu found: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/ ).

If the browser window is less than 1024px and I click the toggle button the menu works fine, but with the menu open, when I expand my browser window greater than 1024px the Slide and Push Menu is still open and my horizontal menu is also showing now. My questions is , using javascript, how can I retract or push the menu back once my browser window reaches 1024px or greater.

Here is a link to the working files http://tinyurl.com/qxp7gjn

Here is the javascript for my menu:

var menuRight = document.getElementById('cbp-spmenu-s2'),
    showRightPush = document.getElementById('showRightPush'),
    body = document.body;

showRightPush.onclick = function () {
    classie.toggle(this, 'active');
    classie.toggle(body, 'cbp-spmenu-push-toleft');
    classie.toggle(menuRight, 'cbp-spmenu-open');
    disableOther('showRightPush');
};

$(window).resize(function () {
    // Window width with legacy browsers.
    windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

    if (windowWidth > 800) {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuRight, 'cbp-spmenu-close');
        disableOther('showRightPush');
    }

});

function disableOther(button) {
    if (button !== 'showRightPush') {
        classie.toggle(showRightPush, 'disabled');
    }
}

Answer 1

You can use window resize function to do so. Below is the sample code. Please note that code only demonstrates the idea. You need to complete it to get it working like you expect.

$(window).resize(function () {
    windowWidth = $(this).width();

    if (windowWidth >= 1224 ) {
        // push back the menu
    } 

}

Answer 2

Subash is on the right path, but this is a higher-performance version w/ support for older browsers as well:

$(window).resize(function() {
  // Window width with legacy browsers.
  windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

  if (windowWidth > 1023) {
    // Do opposite of showRightPush.onclick.
  }

});

Speed comparison: http://jsperf.com/jq-width-vs-client-width/5

(shameless plug) check out Responsive Menus for examples.

I really like that style, codrops has great stuff. I'm going to add it to the RM module.