Why does my hamburger menu switch twice, and not just after two screens?

Question

I have a great navigation menu for hamburgers that almost works, but there is a weird behavior that only happens after I resize the window twice . The hamburger button does what you need if I load the page when the window is narrow (width <800px), or if I load when wide (width> 800 pixels) and the size changes to narrow.

A problem occurs if:

• I load when narrow (width <800px)
• then go to the navigation menu,
• then resize to width (width> 800 pixels),
• then resize to narrow (width <800px).

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

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

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

// 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> 

strong text

Answer 1

Just move the hamburger (); from WidthChange (mq) {} function

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

Try resizing the window more than twice, and you will see that the menu will be displayed up and down more than twice.

Answer 2

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

Perhaps you should do this, just one snapshot of the page loading, since you don’t need to attach listeners every time you show an element, such as a hamburger and cross buttons.

Here is what your function looks 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(); } };