javascript does not always fire in correct order an sometimes breaks

Question

Im a little bit stumped on this for a number of reasons, sometimes it works, sometimes it does not. When you narrow the view port to less than 945px the subnav elements should toggle but sometimes they do not. I am also getting some unexpected results.

I have a codepen here

https://codepen.io/robbiemcmullen/pen/BqdRpN

my code is as follows:-

 //toggle for subnavs
        $(document).ready(function(){

            //only toggle if window size is less than 945px
            $(window).resize(function(){

                var submenu = $('.nav-wrapper');

                if (window.innerWidth < 945) {
                    $(document).on('click','nav ul li',function() {

                        $(submenu).toggle();

                    });
                }
            });

            var listItem = $('.navigation-toggles__list-item');

             //hide mega menu when settings activated
             $(listItem).mouseleave(function(){
                      $(userMenu).hide();
             });

             var userIcon = $('.navigation-user-icon'),
             userMenu = $('.dashboard-user-menu');

            //toggle dashboard menu
             $(userIcon).click(function(e) {
             e.preventDefault();
                    $(userMenu).toggle();
            });


        });

can anybody tell me where I am going wrong?