Why is my hamburger menu toggling twice instead of only once after two screen resizes?

Question

I have a great little hamburger navigation menu almost working, but there is some weird behavior that happens only after I resize the window twice. The hamburger button does what it should if I load the page when the window is narrow (width < 800px), or if I load when wide (width >800px) and resize to narrow.

The problem occurs if:

1. I load when narrow (width < 800px),
2. then toggle the navigation menu,
3. then resize to wide (width > 800px),
4. then resize to narrow (width < 800px).

When I go through these steps, the hamburger button toggles the menu open (as it should), but then it also immediately toggles it close, which I do not want it to do.

I am pretty sure I am doing something wrong with the event listener and I believe my javascript is to blame. If you can help me fix it so that the hamburger button always toggles the menu open, I would appreciate it!

here is the codepen:http://codepen.io/ihatecoding/pen/OXmRAd or if you prefer you can run the snippet.

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(max-width: 800px)");
 mq.addListener( function() {
    WidthChange(mq);
  });
  WidthChange(mq);


};



// media query change /
function WidthChange(mq) {
 
  if (mq.matches) {

        $( "#hamburgerDiv" ).show();  
       $( ".hamburger" ).show();  
        $( ".cross" ).hide();

        $(".nav" ).slideToggle("slow",function() {
            // Animation complete.
         });

        hamburger();
      }
    
  else {

      $( ".nav" ).show();  
      $( "#hamburgerDiv" ).hide();
   };

};


function hamburger(){

$( ".hamburger" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
};

html,
body {
  margin: 0;
  height: 100%
}

#header {
  position: fixed;
  top: 0;
  margin-bottom: -100px;
  left: 0;
  z-index: 999;
  padding-left: .5%;
  padding-right: .5%;
  background-color: #909090!important;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#areaTitle {
  text-transform: uppercase;
  box-sizing: border-box;
  text-transform: uppercase;
  text-decoration: none;
  color: White;
  vertical-align: middle;
  flex: 0 1 15%;
  padding: 0 !important;
  margin: 0!important;
}


#areaTitle a {
  text-transform: uppercase;
  font-size: 30px;
  text-decoration: none;
  color: White;
  vertical-align: middle !important;
  padding: 0 !important;
  margin: 0!important;
}

#nav {
  flex: 1 1 90%;
  padding: 0;
}

#menu {
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 20px;
  text-align: right;
  vertical-align: top;
  width: auto;
  list-style: none;
  -webkit-text-stroke: 1px;
  letter-spacing: 2px;
}

#menu li {
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  color: #909090;
  /*area color*/
  display: inline;
}



a {
  color: white;
  text-decoration: none;
}


#fullpage{
  margin:10%;}

span {
  box-sizing:border-box;
  text-align: center;
  display: block;
  width: 100%;
  margin-top:60px;
  margin-bottom:60px;
}

h2 {color:MediumVioletRed;}

.important {color: Blue;
display: inline;
width: 10%;}


#menu li a {
  text-transform: uppercase !important; 
  text-decoration: none;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap;
}



/* ----------------------hamburger code------------------------*/

.cross{color:white;
float:right;
font-size:90px;
line-height:2px;
/*margin-top: 15px;*/
padding:36px 5px 0px 5px;
outline:none;
margin-top: 5px;
}


.hamburger{color:white;
float:right;
font-size:40px;
line-height:40px;
margin-top: 5px;
padding:0 5px 0px 5px;
}

.hamburgerDiv{display:none;
padding-right: 10px;}

/* ----media query for changing navigation and hamburger----------*/

@media screen and (max-width:800px) {



    #header {
     justify-content: left;
        flex-wrap: wrap;
        padding: 0 ;
    }

    #areaTitle a{font-size:4vw;}
   


    #menu {
        width: 100% !important;
        min-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu li {
        padding: 0;
        margin-left: 1%;
        margin-right: 1%;
    }
    #menu li a {
        padding: 0;
        margin: 0;
        font-size: 100%;
    }

      #nav {

        text-align: center;
        flex:0 0 100%;
        padding: 0 0 10px 0;
    }

  
  .hamburgerDiv{
    display:inline;
flex: 1 1 auto;
}

  
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      <title>my hmaburger</title>
      
</head>

<body>
  
  
  <div id="header" class="header">
  
        <div id="areaTitle" class="navText">
                  
                  <a href="www.google.com">Hamburger problems</a>
        </div>
    
<div class="hamburgerDiv">
<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>
</div>

    
        <nav id="nav">
              

         <ul id="menu" class="navbar-nav nav pubMenuList >
           <li id="first"><a href="#noanc" id="section0" class="navText"></a></li>
 
                              
                              <li id="first menuItem"><a href="#section1Anc" id="section1" class="navText">section 1</a></li>
           <li ><a href="#section2Anc" id="section2" class="navText">section 2</a></li>
           <li class="menuItem" ><a href="#section3Anc" id="section3" class="navText">section 3</a></li>
           <li class="menuItem"><a href="#section4Anc" id="section4" class="navText">section 4</a></li>
             <li class="menuItem"><a href="#section5Anc" id="section5" class="navText">section 5</a></li>
            <li class="menuItem"> <a href="#section6Anc" id="section6" class="navText">section 6</a></li>
           <li class="menuItem"> <a href="#section7Anc" id="section7" class="navText">section 7</a></li>
           <li class="menuItem"> <a href="#section8Anc" id="section8" class="navText">section 8</a></li>
      <li class="menuItem"> <a href="#section9Anc" id="section9" class="navText">section 9</a></li>
     
          </ul>

       </div>
  </div>

                                                 
<div id="fullpage">
                  
<section id="section1Anc" class="areaSection scrollto">
                                                         
                  <h1><span>Section 1</span></h1>

                  <div id = "section1Div" class = "pubSub">
      <p ><h2>On the surface it looks like my hamburger menu is working - but there is a problem.</p> <p>  The problem occurs if you resize the window from a small view (width <800 px), to a larger one (width > 800px), then back to a small view (width <800 px). Once the screen is returned to a smaller version, and you click on the hamburger, the menu toggles back and forth, instead of simply revealing the navigation.  Can you help me so it stops doing this? <span class="important">I think it might be happening because I don't know how to use event handlers properly.</span></p>
                                                          
 <p>IMPORTANT ELEMENTS: 
<ul>
<li><span class="important">#nav</span> is the list of menu items that I only want visible during wide screen and after the hamburger is pressed at width < 800px</li>

<li><span class="important">#hamburgerDiv</span> is the container that contains both the hamburger/open-menu button (.hamburger) and the cross/close-menu button (.cross) </li> 

<li><span class="important"> .hamburger </span>is the hamburger/open-menu button </li> 

<li><span class="important">.cross</span> is the cross/close-menu button </li><ul></h2></p>
                           
                           <img src="http://i.imgur.com/Q23PKdJ.gif" height="334" width="1045">
                     </div>


</section>

<section id="section2Anc" class="areaSection scrollto">

                <h1><span>Section 2</span></h1>
           <div id = "section2Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

            </div>

</section>
  
                                                          
 <section id="section3Anc" class="areaSection scrollto">

                <h1><span>Section 3</span></h1>
           <div id = "section3Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>


            </div>

</section>
  
     
                                                
  <section id="section4Anc" class="areaSection scrollto">

                <h1><span>Section 4</span></h1>
           <div id = "section4Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

            </div>

</section>
                                                 
     <section id="section5Anc" class="areaSection scrollto">

      <h1><span>Section 5</span></h1>
     <div id = "section5Div" class = "pubSub">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        


                                    </div>
</section>
                                             
     <section id="section6Anc" class="areaSection scrollto">

     <h1><span>Section 6</span></h1>
<div id = "section6Div" class = "pubSub">
                                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

                                        </div>
</section>
                                           
     <section id="section7Anc" class="areaSection scrollto">
  
     <h1><span>Section 7</span></h1>
   <div id = "section7Div" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
</div>
</section>

<section id="section8Anc" class="areaSection scrollto">

      <h1><span>Section 8</span></h1>
<div id = "section8Div" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
</div>
</section>

<section id="section9Anc" class="areaSection scrollto">
      <h1><span>Section 9</span></h1>

<div id = "proceedingsPubDiv" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
                                              </div>
      </section>

      </div>
      
</body>

Answer 1

Simply move the hamburger(); out of the function WidthChange(mq) {}

The hamburger() function should only be called once. And now, it is inside the WidthChange(mq) function, so it will be called everytime there is a "match".

Try resizing the window more than twice, and you'll see that menu will pop up and down more than twice.

Answer 2

In your hamburger() function you continue to attach listeners for click event.

Maybe you should do this, just one shot at page load, as you don't need to attach the listeners every time you show an element like the hamburger and cross buttons.

Here how your function should look like:

// Called at the beginning one time only!
hamburger();

// media query change /
function WidthChange(mq) {

  if (mq.matches) {

       $( "#hamburgerDiv" ).show();  
       $( ".hamburger" ).show();  
       $( ".cross" ).hide();

       $(".nav" ).slideToggle("slow",function() {
            // Animation complete.
       });
       // you don't need it here
       // hamburger();
  } else {

      $( ".nav" ).show();  
      $( "#hamburgerDiv" ).hide();

  }

};