onResize and onLoad handlers to toggle mobile layout I'm currently using onResize and onLoad in javascript code. Both events are coded identically so I was wondering if there is a way I could combine both into just one.

function MobileNavigation(el)
{
    this.$el = el;
}

MobileNavigation.prototype.init = function ()
{
    // Event handlers
    window.addEventListener('load', this._onLoad.bind(this));
    window.addEventListener('resize', _.debounce(this._onResize.bind(this), 150));
};


MobileNavigation.prototype._onLoad = function ()
{

    var windowHeight = $(window).outerHeight();
        headerHeight = $('header .wrapped').outerHeight();
        navigationHeight = windowHeight - headerHeight;


    // only apply to minimum width for sticky navigation to appear
    if (window.innerWidth &gt;= MIN_WIDTH_BREAKPOINT) 
    {
        $('.responsive-navigation .nav-wrap').insertAfter('header .navigation-context .mobile-menu');
        $('header .nav-wrap .region-secondary-menu').insertBefore('header .nav-wrap .region-primary-menu');
    }

    else 
    {
        $('.responsive-navigation').append($('header .navigation-context .nav-wrap'));
        $('.responsive-navigation .nav-wrap .region-secondary-menu').insertAfter('.responsive-navigation .nav-wrap .region-primary-menu');
    }

    $('.responsive-navigation').css({'max-height' : navigationHeight, 'height' : navigationHeight});

    // Toogle Mobile Navigation
    $('header .mobile-menu').on('click', function() {
       $(this).toggleClass('active-menu')
       $('.responsive-navigation').toggleClass('show-navigation');
    })


    // Toggle AIM Sub Menus
    $('header .navigation &gt; .menu &gt; li').on('click', function() {
        console.log('expand menu');
        $(this).toggleClass('display-sub-menu');

        // $('.region-primary-menu &gt; nav &gt; .menu &gt; li.display-sub-menu').removeClass('display-sub-menu');
        // $(this).addClass('display-sub-menu');
    })
};




MobileNavigation.prototype._onResize = function ()
{

    var windowHeight = $(window).outerHeight();
        headerHeight = $('header .wrapped').outerHeight();
        navigationHeight = windowHeight - headerHeight;

    // only apply to minimum width for sticky navigation to appear
    if (window.innerWidth &gt;= MIN_WIDTH_BREAKPOINT) 
    {
        console.log('normal');
        $('.responsive-navigation .nav-wrap').insertAfter('header .navigation-context .mobile-menu');
        $('header .nav-wrap .region-secondary-menu').insertBefore('header .nav-wrap .region-primary-menu');
    }

    else 
    {
        console.log('mobile')
        $('.responsive-navigation').append($('header .navigation-context .nav-wrap'));
        $('.responsive-navigation .nav-wrap .region-secondary-menu').insertAfter('.responsive-navigation .nav-wrap .region-primary-menu');
    }

    $('.responsive-navigation').css({'max-height' : navigationHeight, 'height' : navigationHeight});

};
Your code is mainly about this test:


if (window.innerWidth &gt;= MIN_WIDTH_BREAKPOINT)



You shouldn't be doing this using JavaScript to do this at all. Width-dependent layout is exactly what CSS media queries are for.

Furthermore, I would caution you against activating the mobile layout based on the width. This will break the "Request Desktop Site" feature in iOS Mobile Safari, which uses User-Agent switching instead.