javascript - Responsive Menu Issues -

ok have no near enough knowledge on js know possibly be.

my navigation menu has stopped working in mobile.

if resize browser mobile desktop mobile menu shows menu icon 3 times, if repeat keeps duplicating, open , doesnt close after first time..

you can see live here qubecatering.com

i have no idea code be..

any great! im using flexymenu plugin, , use on many sites , never have issues.

here html:

<div class="flexy-menu"><ul id="menu-primary" class="flexy-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-20"><a href="http://qubecatering.com/">home</a></li> <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://qubecatering.com/about/">about</a></li> <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://qubecatering.com/case-studies/">case studies</a></li> <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://qubecatering.com/services/">services</a></li> <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://qubecatering.com/contact/">contact</a></li> </ul></div> 

but here css:

.nav-wrapper {     background-color:#ffffff;     width:100%;     height:auto; }  .nav-inner {     width:100%;     max-width:960px;     height:60px;     display:block;     margin-left:auto;     margin-right:auto;     margin-bottom:0px; }  .nav-logo   {     height:60px;     width:auto;     display:inline-block; }  /*******************************************************************************                             default configuration *******************************************************************************/  .flexy-menu {     width: auto;     margin:0;     padding: 0;     height:60px;     position:relative;     float:right;     list-style: none;     z-index: 99999;     display:inline-block; }  .flexy-menu li {     display:inline-block;     padding:0;     float:right;     position:relative; } .flexy-menu > li > {     padding:23px 15px 5px 15px;      height:32px;     text-decoration:none;     display:block;     -webkit-transition:color 0.2s linear, background 0.2s linear;        -moz-transition:color 0.2s linear, background 0.2s linear;       -o-transition:color 0.2s linear, background 0.2s linear;         transition:color 0.2s linear, background 0.2s linear;         font-family: 'latoregular';     font-size:14px;     color:#32455c;     text-transform:uppercase; } .flexy-menu > li > a:hover, .flexy-menu > li > a:focus, .flexy-menu > li > a:active {     background-color:#835db1;     color:#ffffff; }   /*-----------------------------     drop down configuration -----------------------------*/ .flexy-menu ul,  .flexy-menu ul li ul {     list-style: none;     margin-left: 5px;     padding: 0;       display: none;     position: absolute;     z-index: 99999;     width: 200px;  } .flexy-menu ul {     top: 100px;     left: 0; } .flexy-menu ul li ul {     top: 0;     left: 100%; }  .flexy-menu ul li {     clear:both;     width:100%;     border: none;     font-size:12px; } .flexy-menu ul li {     padding:15px 20px;     width:100%;     color:#dedede;     font-size:13px;     text-decoration:none;     display:inline-block;     float:left;     clear:both;     box-sizing:border-box;     -moz-box-sizing:border-box;      -webkit-box-sizing:border-box;     -webkit-transition:color 0.2s linear, background 0.2s linear;        -moz-transition:color 0.2s linear, background 0.2s linear;       -o-transition:color 0.2s linear, background 0.2s linear;         transition:color 0.2s linear, background 0.2s linear;     border-bottom: 1px solid rgba(61, 71, 82, 0.8);  }  .flexy-menu ul li a:hover {  }  /*-----------------------------     drop down indicators -----------------------------*/ .flexy-menu > li .indicator{     position: absolute;     color: #7995a7;     top: 39px;     right: 8px;     font-size: 17px; } .flexy-menu ul > li .indicator{     top: 10px;     right: 8px; }  /*------------------     preset sizes ------------------*/ .thin > li > a{     padding: 10px 22px; } .thin ul{     top: 40px; } .thin > li .indicator{     top: 10px; }  .thick > li > a{     padding: 40px 22px; } .thick ul{     top: 100px; } .thick > li .indicator{     top: 40px; }  /*------------------------------------     collapsible menu configuration ------------------------------------*/ .flexy-menu > li.showhide{     display: none;     width: 30%;     height: 60px;     cursor: pointer; }  .flexy-menu > li.showhide span.icon{     margin: 23px 30px;     float: right; } .flexy-menu > li.showhide .icon em{     margin-bottom: 4px;     display: block;     width: 25px;     height: 3px;     background: #aad730; }  /*****************************************************************************                             responsive design *****************************************************************************/ @media screen , (max-width: 768px) {     .flexy-menu {         width: 50%;         margin:0;         padding: 0;         position:absolute;         top:0px;         right:0px;         list-style: none;     }     .flexy-menu li{         display: block;         width: 100%;         background-color:#ffffff;     }     .flexy-menu > li > a{         padding-top:15px;         padding-bottom:30px;         padding-left: 25px;         border-bottom:1px solid #d3d3d3;     }      .flexy-menu li:hover > a,     .flexy-menu li.active {         border-bottom:1px solid #d3d3d3; }      .flexy-menu a{         width: 100%;         box-sizing:border-box;         -moz-box-sizing:border-box;          -webkit-box-sizing:border-box;      }     .flexy-menu ul {         top: 60px;         left: 0;     }      .flexy-menu ul,     .flexy-menu ul li ul{         position: static;     }     .flexy-menu ul li ul,     .flexy-menu ul li {         border-left: none;         border-right: none;     }     .flexy-menu ul li a,     .flexy-menu.vertical ul li    {         padding-top:15px;         padding-bottom:15px;     }     .flexy-menu ul > li > a{         padding-left: 40px !important;     }     .flexy-menu > li .indicator{         top: 15px;         right: 25px;         font-size: 17px;     }     .flexy-menu ul > li .indicator{         display: none;     } } 

here javascript:

$.fn.flexymenu = function(options){     var settings = {         speed               : 300,                  // dropdown speed (ms)         type                : "horizontal",         // menu type arrangement         align               : "right",              // menu alignment (horizontal type)         indicator           : false                 // indicator indicates submenu     }     $.extend( settings, options );      var bigscreen = false;      if(settings.type == "vertical"){         $(".flexy-menu").addclass("vertical");         if(settings.align == "right"){             $(".flexy-menu").addclass("right");         }     }      if(settings.indicator == true){         var num = 0;         $(".flexy-menu").find("li").each(function(){             if($(this).children("ul").length > 0){                 $(this).append("<span class='indicator'>+</span>");             }         });     }      $(".flexy-menu").prepend("<li class='showhide'><span class='icon'><em></em><em></em><em></em></span></li>");      screensize();      $(window).resize(function() {         screensize();     });      function screensize(){         $(".flexy-menu").find("li").unbind();         $(".flexy-menu").find("ul").hide(0);         if(window.innerwidth <= 768){             showcollapse();             bindclick();             if(bigscreen == true){                 rightalignmenu();                 bigscreen = false;             }         }         else{             hidecollapse();             bindhover();             if(settings.type == "horizontal" && settings.align == "right" && bigscreen == false){                 rightalignmenu();                 bigscreen = true;             }         }     }      function bindhover(){         $(".flexy-menu li").bind("mouseover", function(){             $(this).children("ul").stop(true, true).fadein(settings.speed);         }).bind("mouseleave", function(){             $(this).children("ul").stop(true, true).fadeout(settings.speed);         });     }      function bindclick(){         $(".flexy-menu > li").bind("click", function(){             if($(this).children("ul").css("display") == "none"){                 $(this).find("ul").slidedown(settings.interval);             }             else{                 $(this).children("ul").slideup(settings.interval);             }         });     }      function showcollapse(){         $(".flexy-menu > li:not(.showhide)").hide(0);         $(".flexy-menu > li.showhide").show(0);         $(".flexy-menu > li.showhide").bind("click", function(){             if($(".flexy-menu > li").is(":hidden")){                 $(".flexy-menu > li").slidedown(300);             }             else{                 $(".flexy-menu > li:not(.showhide)").slideup(300);                 $(".flexy-menu > li.showhide").show(0);             }         });     }      function hidecollapse(){         $(".flexy-menu > li").show(0);         $(".flexy-menu > li.showhide").hide(0);     }         function rightalignmenu() {         $(".flexy-menu > li").addclass("right");         var menuwidth = $(".flexy-menu").width();         var menuitems = $(".flexy-menu").children("li");         $(".flexy-menu").children("li:not(.showhide)").detach();         for(var = menuitems.length; >= 1; i--){             $(".flexy-menu").append(menuitems[i]);         }            } } 

the problem have there because appending things ".flexy-menu"class, if check html, see added class in 2 places, that's way it's duplicationg

<div class="flexy-menu">     <li class="showhide right" style="display: none;"><span class="icon"><em></em><em></em><em></em></span>     </li>     <ul id="menu-primary" class="flexy-menu" style=""> 

try removing element

edit

great! anyway recommend use approach next time. can use javascript toggle class on navigation bar , using css show , hide menu. it's simple

(function () {     var navbar = document.queryselector('.nav-bar'),         togglebutton = document.queryselector('.toggle-button');       togglebutton.addeventlistener("click", function () {         navbar.classlist.toggle('active');     }); })();