Q:

Responsive Menu Flashes On Click

I'm getting reports from users that when they click the 3 line mobile menu of their phone, the menu won't stay open, it'll just flash and disappear. It happens on iOS and Android phones.
http://samiconcepts.com/xidax-home (this is the site with the issue).
Can anyone assist on this, I have no idea how to solve it :/ Thank you

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dro

    pdown ',
    toggle: 'menuR1',
    open: 'dropdown-open',
    nest: true
  };

  $(document).on('click.dropdown touchstart.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);
.dropdown {
  FONT-SIZE: 12PX;
  position: relative;
  width: 100%;
  padding: 10px;
  margin-right: 10px;
  text-align: right;
  margin: 0 auto;
  color: #a3a3a3;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
}

.dropdown a {
  display: block;
  text-decoration: none;
  color: #2f2f2f;
}


/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
  text-align: right;
  margin-right: 40px;
  margin-top: 20px;
}


/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #fff;
}


/* options */

.dropdown-menu .option a {
  padding: 15px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-bottom: 1px solid #e8e8e8;
  text-align: center;
}

.respMenu {
  display: block;
}

.header2 {
  height: 65px;
  width: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.dropdown-menu .option a:hover {
  background-color: #02bc00;
  cursor: pointer;
  color: #fff;
}


/* open */

.dropdown-open {
  z-index: 400;
}

.dropdown-open>.dropdown-menu {
  display: block;
  margin-top: -34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header2">

  <a href="/"><img src="/images-xidax/logo-white.png" class="logoR"></a>

  <div id="language" class="dropdown">
    <a class="dropdown-toggle"><img src="/images-sumo/list-menu.png" class="menuR1"></a>
    <ul class="dropdown-menu">
      <li class="option"><a href="/">PRODUCTS</a></li>
      <li class="option"><a href="/">REVIEWS</a></li>
      <li class="option"><a href="/">FINANCING</a></li>
      <li class="option"><a href="/">COMPANY</a></li>
      <li class="option"><a href="/">CONTACT</a></li>
      <li class="option"><a href="/">CART</a></li>


    </ul>
  </div>

</div>

A:

It seems that touchstart and click bring issues when on the same element at the same time. So the touchstart will trigger a click which will make the menu flash.
You can however check, if current device is a touch device and only add the needed event (either touch or click):
I modified your JS on three lines providing that:
(function($, undefined)
       {
           var open = [];

           var opts = {
               selector: '.dropdown',
           toggle: 'menuR1',
           open: 'dropdown-open',
           nest: true
       };

       var clickEvent = (function() {
         if ('ontouchstart' in document.documentElement === true)
         return 'touchstart';
         else
         return 'click';
       })();

       var isTouchDevice = 'ontouchstart' in document.documentElement === true;
       var dropdownEvent = isTouchDevice ? 'touchstart.dropdown' : 'click.dropdown';

       $(document).on(dropdownEvent, function(e)
       {
           // Close the last open dropdown if click is from outside the target dropdown
           if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
           {
               open.pop().removeClass( opts.open );
           }

           var $this = $(e.target);

           // If target is a dropdown then toggle it...
           if ( $this.hasClass( opts.toggle ) )
           {
               e.preventDefault();

               $this = $this.closest( opts.selector );

               if ( ! $this.hasClass( opts.open ) )
               {
                   open.push( $this.addClass( opts.open ) );
               }
               else
               {
                   open.pop().removeClass( opts.open );
               }
           }
       });

   })(jQuery);

You might be able to reproduce the issues on chrome, by opening the mobile view.
Edit
* I fixed a syntax error I copied from above code.
* Take care to refresh browser after switching mobile and desktop view in Chrome, so that correct event is used on initializing the JavaScript.

