Overriding scrolling behavior for navigation elements
One potential problem I see is that you initialize the w variable once at $(document).ready() time and then you use that value in several event handlers.  But the window width is a dynamic value that can be changed over time so your event handlers can be using a stale value for w.  You should probably be fetching $(window).width() anytime you need it so it is always correct.



You can also replace:

$('#main_nav &gt; ul').css('display', 'none');


with this:

menu.hide();


since you've already cached the value of $('#main_nav &gt; ul') and .hide() is a shortcut for .css('display', 'none');.



You could also probably replace this entire code section:

if (w &lt; 768) {
    $('#main_nav &gt; ul').css('display', 'none');
}


with a CSS rule using media queries.



menu.removeAttr('style'); is pretty harsh (removing all possible styles).  If you're just trying to show the menu again when the width has exceeded a desired value, then you can just do this:

$(window).resize(function () {
    if ($(window).width() &gt; 768) {
        menu.show();
    }
});


Note, there is no need to check .is(':hidden') because calling .show() on something that is already visible just does nothing and .is(':hidden') is a slightly expensive operation because it has to check the visibility of every single parent object.