jquery mobile menu malfunctioning

So I have been playing around with creating a navigation menu that will responde to different screen sizes. On the smallest it will be a collaspable menu that uses <i class="fa fa-bars"> as a button.

Everything was working correctly until I modified the javascript to remove the <i> and show the navigation buttons depending on screen size. I am guessing I am making an error some where in my jquery code, but can't seem to find the solution.

The design is to show the <i> on load, and hide the nav bar. The nav bar is hidden if it doesn't have the CSS class of "open".

It will work some times. Then other it shows the <i> when larger than 450 px.

The code is messy currently, and I will work on making it DRY once i get it functioning.

Any help would be appreciated.

$(window).resize( function(){
              var win = $(this);
              if (win.width() < 450 ) {
                    $("i").show();
                    $("ul").removeClass("open");
                    $("ul").mouseleave( function (){
                        $("ul").removeClass("open");
                        $("i").show();
                    });
                    $("i").click(function () {
                        $("ul").toggleClass("open");
                        $("i").hide();
                    });
              } else {
                  $("i").hide();
                  $("ul").toggleClass("open");
              } 
             });  

I also rewrote it using a conditional statment instead of else, but it had no affect.

if (win.width() > 450) {
                  $("i").hide();
                  $("ul").toggleClass("open");
}