My responsive "hamburger" menu is acting weirdly with window.resize() / media queries

I'm trying to create a responsive "hamburger" menu for a site i'm building using jQuery and css media queries.

I've used window.resize(); to detect when my media query has kicked in to trigger the menu, but I'm getting some strange results. Upon initializing the click event, the menu begins to toggle on and off automatically, and on the rare occasions it works properly, returning to full screen leaves an icon displayed.

Heres a JS fiddle: https://jsfiddle.net/6cacs8hq/3/

 $(document).ready(function(){
     $(window).resize(function(){
          if ($("nav a").css("text-align") == "center"){
             $("nav").hide();
             $(".cross").hide();
             $(".hamburger").click(function(){
             $("nav").slideToggle(400, function(){
                 $(".hamburger").hide();
                 $(".cross").show();
               });
           });
           $(".cross").click(function(){
               $("nav").slideToggle(400, function(){
                   $(".cross").hide();
                   $(".hamburger").show();
               });
            });
      }
      else {
        $("nav").show();
      }

    });
});

I may be approaching this completely incorrectly so apologies if this is a waste of your time, but any help would be appreciated!